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本 书 以 理论 与 实践 相 结合 的 方式 ， 循 序 渐 进 地 讲解 了 使 用 Dreamweaver CS5 制 
作 事 、 动 态 网 页 网 站 的 方法 与 扩 巧 。 全 书 分 14 章 介 绍 了 Dreamweaver CS5 的 特点 、 
功能 、 使 用 方法 和 技巧 。 有 具体 内 容 包括 : 网 页 制作 基础 知识 ，Dreamweaver CS5 简介 、 
网 站 的 构建 与 管理 、 处 理 文 字 与 图 形 、 制 作 超 链接 、HTML 与 CSS 基础 、 表 格 和 AP 
元 素 、 创 建 框 染 网 页 、 应 用 表单 、Dreamweaver 的 内 置 行为 、 制 作 多 媒体 网 页 、 统 一 
网 页 风格 、 动 态 网 页 基础 和 儿童 教育 网 站 设计 综合 实例 等 。 

本 书 实 例 丰 富 、 内 容 翔 实 、 操 作 方 法 简单 多 学 ， 不 仪 适 合 对 网 页 制作 和 网 站 管 
理 感 兴趣 的 初 、 中 级 谈 者 学 习 使 用 ， 也 可 供 从 事 网 站 设计 及 相关 工作 的 专业 人 士 参 
考 。 

本 书 附 有 一 张 光 盘 ， 内 容 为 教材 综合 实例 部 分 所 有 网 页 文件 的 源 代 码 和 操作 过 
程 录 屏 讲解 动画 以 及 专 为 教师 授 谍 准备 的 PPT 文件 ， 供 读者 学 习 和 教师 授课 使 用 。 
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的 Web 服务 现在 许多 普通 的 宽 市 用 户 也 能 做 到 。 您 是 否 也 有 种 神 动 ， 想 目 己 来 制作 网 站 ， 为 
自己 在 网 上 安 个 家 ? 也 许 你 会 觉得 网 页 制作 很 难 ， 然 而 如 条 使 用 Dreamweaver CS5， 即 使 制 
作 一 个 功能 强大 的 网 站 ， 也 是 件 非 党 容易 的 事情 。 

被 誉 为 “网 页 制作 三 剑客 ”之 一 的 Dreamweaver CS5 是 若 名 影像 处 理 软件 公司 Adobe 最 
新 推出 的 网 页 设计 制作 工具 ， 是 Dreamweaver CS4 的 升级 版 本 ， 是 日 前 最 完美 的 网 站 制作 工 
具 。Dreamweaver CS5 是 一 种 专业 的 HTML 编辑 器 ， 用 于 对 Web 站 点 、Web 页 和 Web 应 用 
程序 进行 设计 、 编 码 和 开发 。 无 论 您 喜欢 直接 编写 HTML 代码 ， 还 是 偏爱 “所 见 即 所 得 ”的 
工作 环境 ，Dreamweaver CS5 都 会 为 您 提供 许多 方便 的 工具 ， 助 您 迅速 高 效 地 制作 网 站 。 

全 书 分 14 章 介 绍 了 Dreamweaver CS5 的 特点 、 功 能 、 使 用 方法 和 技巧 。 有 基体 内 容 包 括 : 
网 页 制作 基础 知识 ，Dreamweaver CS5 简介 、 网 站 的 构建 与 管理 、 处 理 文 字 与 图 形 、 制 作 超 
链接 、HTML 与 CSS 基础 、 表 格 和 AP 元 素 、 创 建 框架 网 员 、 应 用 表单 、Dreamweaver 的 内 
置 行为 、 制 作 多 媒体 网 页 、 统 一 网 页 风格 、 动 态 网 页 基础 和 儿童 教育 网 站 设计 综合 实例 每 。 

本 书 实例 丰 宇 、 内 容 翔 实 、 操 作 方 法 简单 多 学， 不 仅 适 合 对 网 页 制作 和 网 站 管理 感 兴 
的 初 、 中 级 谈 者 学 习 使 用 ， 也 可 供 从 事 网 站 设计 及 相关 工作 的 专业 人 士 参 考 。 

本 书 在 结构 上 力求 内 容 丰 军 、 结 构 清 晰 、 实 例 典 型 、 讲 解 详 尽 、 军 于 局 发 性 ;在 风格 上 
力求 文字 精炼 、 脉 络 清晰 。 另 外 ， 在 文章 内 容 中 包括 了 大 量 的 “注意 ”与 “技巧 ”” 它们 能 够 
提醒 读者 可 能 出 现 的 问题 、 容 易 犯 下 的 错误 以 及 如 何 避 免 ， 还 提供 操作 上 的 一 些 捷径 ， 使 议 
者 在 学 习 时 能 够 事半功倍 ， 技 局 一 筹 。 

为 了 配合 各 学 校 师 生 利用 此 书 进 行 教学 的 需要 ， 随 书 配 赠 多 妊 体 光盘 ， 包 含 全 书 实例 操 
作 过 程 配 音 讲解 孙 屏 AVI 文件 和 实例 结 末 文件 和 素材 文件 ， 以 及 专 为 老师 教学 准备 的 
PowerPoint 多 媒体 电子 教案 。 

本 书 由 三 维 书屋 工作 宇 总 策划 ， 主 要 由 杨 世 更 和 杨 雪 静 编 号 。 刘 虽 丽 、 王 佩 梢 、 有 到 涛 、 
李鹏 、 周 广 分 、 周 冰 、 李 玉 、 重 伟 、 和 夏 德 伟 、 路 纯 红 、 王 兵 学 、 王 敏 、 郑 长 松 、 画 清华 、 李 
广 玄 、 张 日 唱 、 董 荣 薪 、 王 塔 合 也 参加 了 部 分 编写 工作 。 

书 中 主要 内 容 来 和 目 于 作者 几 年 来 使 用 Dreamweaver 的 经 验 总 结 。 虽 然 笔 者 儿 易 其 稿 ， 但 
由 于 时 间 人 仓促， 加 之 水 平 有 限 ， 书 中 丝 漏 与 失误 在 所 难免 ， 层 请 广大 读者 联系 
win760520@126.com 提 出 宝贵 的 批评 意见 。 欢 迎 登 录 www.sjzsanweishuwu.com 进 行 讨论 。 
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网 页 制作 基础 知识 


本 章 通 过 对 网 页 制作 知识 的 学 习 , 了 解 网 页 制作 的 一 
些 基 本 术语 和 网 页 制作 的 基本 步骤 , 然后 简要 介绍 设计 制 
作 网 页 的 常用 工具 ， 重 点 介绍 Adobe 公 司 最 新 推出 的 
Dreamweaver CS5， 它 涵盖 了 网 页 制作 与 站 点 管理 ， 是 使 
用 最 多 的 网 页 制作 工具 之 一 。 


网 页 与 网 站 
网 站 建设 的 基本 步骤 


Dreamweaver CS5 中 文 版 标准 实例 教程 


在 学 习 网 页 制作 的 方法 和 技巧 之 前 ， 读 者 (尤其 是 网 页 设计 的 初学 者 ) 很 有 必要 先 了 
解 网 页 与 网 站 的 联系 与 区 别 。 

网 页 是 网 络 上 的 基本 文档 ， 网 页 中 包 仿 文字、 图 片 、 声 音 、 动 画 、 影 像 以 及 链接 等 元 
素 ， 通 过 对 这 些 元 素 的 有 机 组 合 ， 驶 构成 了 包含 各 种 信息 的 网 页 。 人 简单 地 说 ， 通 过 浏览 器 
在 WW 上 所 看 到 的 每 一 个 超 文本 文件 都 是 一 个 网 页 ， 而 通过 超 链 接连 接 在 一 起 的 阁 干 个 网 
页 的 集合 即 构成 网 站 。 

通常 网 站 都 有 一 个 能 够 连接 到 网 上 的 唯一 编码 ， 即 IP 地 址 。IP 地 址 是 由 32 位 二 进 制 数 
组 成 的 ， 为 了 便于 记忆 ， 通 常 把 它 分 为 4 组 ， 每 组 8 位 ， 每 组 之 间 用 小 数 点 隔 开 ， 例 如 : 
202. 14.5.7。 由 于 IP 地 址 非常 不 便于 记忆 ， 所 以 通常 用 一 串 文 字 来 代 符 ， 例 如 
www. sina. com， 这 束 是 域名 。 域 名 也 必须 是 唯一 的 ， 它 由 国定 的 网 络 域名 管理 组 织 在 全 世 
界 范 围 内 进行 统一 管理 。 


通常 我 们 看 到 的 网 页 ， 都 是 以 . htm、. html、. shtml 等 为 后 绥 的 文件 。 在 网 站 设计 中 ， 
这 种 纯粹 HTML 格 式 的 网 页 通 第 被 称 为 脐 态 网 页 。 评 态 网 页 的 内 容 是 固定 的 ， 当 用 户 浏 响 风 
页 内 容 时 ， 服 务 器 仅仅 是 将 已 有 的 静态 HTML 文 档 传送 给 浏览 右 供 用 户 阅 读 。 寿 网 站 维护 者 
要 更 新 网 页 的 内 容 ， 就 必须 手工 更 新 所 有 的 HTML 文 档 。 因 此 ， 静 态 网 页 的 致命 弱点 就 是 不 
易 维护 ， 为 了 不 断 更 新 网 页 内 容 ， 束 必须 不 断 地 重复 制作 HTML 文 档 ， 随 看 网 站 内 容 和 信息 
量 的 日 益 扩 增 ， 网 页 维护 的 工作 量 无 颖 将 是 非常 巨大 的 。 


在 HTML 格 式 的 网 页 上 ， 也 可 以 出 现 各 种 动态 的 效果 ， 如 .GIF 格式 的 动画 、FLASH、 演 
动 字母 等 , 但 这 些 动 态 效果 只 是 视觉 上 的 , 与 下 面 将 要 介绍 的 动态 网 页 是 完全 不 同 的 概念 。 

所 谓 动态 网 页 ， 是 指 服务 器 会 针对 不 同 的 使 用 者 以 及 不 同 的 要 求 执行 不 同 的 程序 ， 从 
而 提供 不 同 的 服务 ， 一 般 与 数据 库 有 关 。 这 种 网 页 通常 在 服务 器 端 以 扩展 名 asp、jsp 或 是 
aspx 等 储存 。 动 态 网 页 的 页 面目 动 生成 ， 无 须 手工 维护 和 更 新 HTML 文 档 ;， 不 同 的 时 间 、 
不 同 的 人 访问 同一 网 址 时 会 产生 不 同 的 页 面 。 

动态 网 页 与 静态 网 页 的 最 大 不 同 就 是 Web 服 务 器 和 用 户 之 间 的 动态 交互 ， 这 也 是 
Internet 强 大 生命 力 的 体现 。 


在 现在 这 个 Internet 时 代 ，WWW 网 站 和 个 人 主页 浩如烟海 。 要 使 访问 者 从 众多 的 网 站 
中 选择 访问 您 的 站 点 ， 并 不 是 一 件 简单 的 事情 。 因 此 ， 要 想 设 计 出 达到 预期 效果 的 站 点 和 
网 页 ,需要 在 建立 网 站 前 对 用 户 需 求 有 深刻 理解 ， 明确 建设 网 站 的 目的 , 确定 网 站 的 功能 ， 
确定 网 站 规模 、 投 入 费用 ， 进 行 必要 的 市 场 分 析 等 ， 并 对 人 们 上 网 时 的 心理 进行 认真 的 分 
析 研 究 。 在 设计 时 遵循 一 些 基本 原则 和 流程 也 是 很 有 必要 的 。 只 有 详细 的 琐 划 ， 才 能 避免 
在 网 站 建设 中 出 现 的 很 多 问题 ， 使 网 站 建设 能 顺利 进行 。 

本 书 将 通过 一 个 网 站 实例 的 制作 贯穿 各 个 章节 ， 在 讲解 各 音 的 知识 点 的 同时 ， 引 导读 
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者 完成 个 人 网 站 的 制作 。 


LLlt. 2. 1 确定 网 站 的 主题 和 目标 用 户 


一 个 网 站 的 成 功 与 理 与 建站 之 前 的 网 站 规划 有 看 极为 重要 的 关系 。 建 立 网站， 首先 要 
对 网 站 及 网 页 的 内 容 、 风 格 进行 规划 。 这 一 阶段 的 任务 主要 是 明确 网 站 的 主题 和 名 称 ， 并 
对 网 站 的 技术 可 行 性 、 经 济 可 行 性 和 时 间 可 行 性 进行 分 析 。 

网 站 的 主题 残 是 网 站 所 要 包含 的 主要 内 容 。 一 个 优秀 的 网 站 其 页 面 必须 做 好 三 个 方 
面 : 内 容 、 人 速度 和 风格 。 内 容 是 网 站 的 根本 ， 一 个 成 功 的 网 站 在 内 容 方 面 定 有 独到 之 处 ， 
如 狐 浪 的 新 闻 、 百 度 的 搜索 、 联 众 的 游戏 等 。 无 论 是 个 人 网 站 、 企 业 网 站 还 是 综合 性 信息 
网 站 ， 都 需要 明确 地 树立 目 己 的 主题 和 方 问 ， 在 内 容 组 织 上 要 有 特色 、 定 位 准确 、 内 容 丰 
理 、 且 有 民 好 的 即时 更 痢 性 。 

不 同 的 Web 站 点 有 相应 的 浏览 群体 ， 特 定 的 浏览 群体 意味 痢 有 特定 的 主题 内 容 ， 根 扼 
站 点 所 服务 的 对 象 进行 设 计 定 位 ， 才 能 有 的 放 天 。 例 如 ， 要 设计 一 个 面 癌 年 轻 人 的 个 人 网 
站 ， 可 以 通过 得 资料 或 调 碍 了 解 年 轻 人 一 般 都 喜欢 时 尚 资讯 ， 在 线 交 流 ， 写 博客 日 入， 网 
上 购物 每 。 如 果 和 面面俱到 地 痢 做 的 话 ， 势 必要 人 花费 很 大 的 时 间 和 精力 ， 而 且 会 叶 作 主题 不 
够 明确 , 所 以 可 以 找到 一 个 突破 后, 例如 把 重点 帮 在 博客 日 忘 上, 以 六 得 目 己 特定 的 用 户 。 

Web 站 后 的 风格 是 指 站 扣 的 整体 形象 给 浏览 者 的 感受 。 整 体形 象 包括 站 操 的 CI， 版 而 
fn), vio SETTE, CE. 语气， 内 容 等 诸多 因 系 。 风 格 会 极 大 地 影响 读者 对 网 站 
的 评价 ， 浏 览 者 不 需要 任何 预 完 的 知识 ， 束 可 能 从 Web 站 点 的 视觉 界面 获得 主观 印象 。 例 
如 : 迪斯尼 是 生动 活泼 的 〈 如 图 1-1 所 示 ) ;， 欧 班 茉 网 站 是 请 痢 漂 完 的 〈 如 儿 1-2 所 示 ) 
宋 马 是 时 尚 专业 的 《如 图 1-3 所 示 〉。 在 定位 风格 时 必须 要 考虑 以 下 儿 扣 : 
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图 1-1 迪斯尼 中 国 官 方 网 站 
(10 确保 形成 统一 整体 和 界面 风格 。 网 页 上 所 有 的 图 像 、 文 字 ， 包 括 背 景 颜 色 、 分 
隔 线 、 字 体 、 标 题 、 注 脚 等 要 形成 统一 的 整体 。 这 种 整体 的 风格 要 与 其 他 网 站 的 界面 风格 
相 区 别 ， 形 成 目 己 的 特色 。 
(2) 人 确保 网 页 界面 的 清晰 、 和 简洁、 美观 。 
(3) 确保 视觉 元 素 的 合理 安排 ， 有 坚 情 况 下 ， 让 读者 在 浏览 网 页 的 过 程 中 体验 到 视 
觉 的 秩序 感 、 节 委 感 、 新 奇 感 。 
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风格 的 形成 不 是 一 次 定位 的 ，WEB 制 作 人 员 可 以 在 实践 中 不 断 强 化 、 调 整 、 修 饰 ， 下 
到 网 站 达到 了 独树一帜 的 境界 。 


图 1-2 欧珀莱 中 国 官 方 网 站 


1385887 x3 x5 
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图 1-3 "rh Bs] pv] yh 


[Lli. 2. 2. 规划 网 站 的 栏目 与 版 块 


不 管 是 简单 的 个 人 主页 ， 还 是 复杂 的 、 儿 干 个 页 面 的 大 形 网 站 ， 对 网 站 的 规划 必要 放 
到 第 一 步 ， 因为 它 直 接 关 系 到 网 站 的 功能 是 盏 完善 ,是 侍 够 层次 , 是 寿 达 到 预期 的 目的 等 。 
明确 了 网 站 的 主题 和 目标 用 户 之 后 ， 接 下 来 要 依据 网 站 的 主题 ， 仔 细 规 划 和 设计 主题 中 的 
每 个 栏目 与 版 块 。 

例如 ， 通 党 个 人 网 站 主要 用 于 展现 个 人 风 灯 。 因 此 ， 网 站 的 主要 内 容 古 个 人 感 兴 趣 的 
东西 ， 如 一 些 精 美的 文章 、 日 志 、 学 习 笔 记 、 网 站 相册 。 制 作 网 站 的 目的 除了 展示 个 人 的 
东西 以 外 ， 还 希望 能 与 其 他 网 友 交 流 ， 因 此 可 以 深 加 留 言 板 ; 为 了 加 大 网 站 的 访问 量 ， 或 
收藏 目 己 喜欢 的 素材 、 网 站 ， 可 以 诬 加 友情 链接 。 如 今 电 子 商务 盛行 ， 不 妨 也 在 个 人 网 站 
上 开 一 个 简单 的 小 店 ， 将 目 己 的 商品 或 需要 换购 的 物品 放置 在 个 人 网 站 上 。 


[1.2. 3 组 织 站 点 结构 


组 织 站 点 结 构 是 指 编 排 网 站 文件 的 目录 结构 。 设 苞 站 点 的 第 规 做 法 是 在 本 地 磁盘 上 创 
建 一 个 包含 站 点 所 有 文件 的 文件 来， 然后 在 该 文件 夹 中 创建 和 编辑 文档 。 当 准备 好 发 布 站 
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点 并 人 允许 公众 查看 时 ， 再 将 这 些 文 件 复制 到 Web 服 务 器 上 。 目 录 结 构 的 好 坏 ， 对 站 点 本 刁 
的 上 传 维护 以 及 以 后 内 容 的 更 新 和 维护 有 痢 重 要 的 影 啊 。 

在 建立 目录 结构 时 ， 尽 量 不 要 将 所 有 文件 都 存放 在 根 目 录 下 ， 而 是 按 栏目 内 容 建 立 子 
目录 。 例 如 时 尚 资讯 站 点 可 以 根据 时 尚 类 别 分 别 建 并 相应 的 目录 ， 如 服饰 、 家 居 、 首 像 、 
美容 等 相应 目录 。 其 他 如 友情 链接 等 需要 经 第 更 新 的 次 要 栏目 ， 可 以 建立 独立 的 子 目录 。 
而 一 些 相关 性 强 、 不 需要 经 第 更 狐 的 栏目 ， 如 关于 本 站 、 联 系 我 们 等 ， 可 以 合并 放 在 统一 
目录 下 。 另 外 ， 在 每 个 主 目录 下 都 建立 独立 的 images 目 录 ， 用 于 存放 各 个 栏目 中 的 图 卢 。 
在 默认 情况 下 ， 站 点 根 目 录 下 都 有 images 上 有 目录 ， 用 于 存放 首页 和 次 要 栏目 的 图 片 。 

此 外 ， 为 便于 维护 和 管理 ， 建 立 的 目录 结构 的 层次 建议 不 要 超过 4 层 ， 且 不 要 使 用 中 
文 目 录 名 或 过 长 的 目录 名 。 

本 网 站 实例 只 是 个 人 介绍 性 质 的 页 面 ， 主 要 是 4 个 静态 的 页 面 和 一 个 动态 的 页 面 ， 因 
此 在 建 并 目录 的 时 候 ， 可 以 将 其 中 的 页 面 文件 直接 放 在 根 目录 下 ， 所 有 的 图 片 放 在 images 
人 Ts 

由 于 本 例 中 的 动态 页 面 用 到 了 数据 库 ， 因 此 ， 新 建 一 个 名 为 data 的 文件 夹 放置 数据 库 
文件 。 本 网 站 实例 将 制作 6 个 页 面 ， 下 面 简要 介绍 各 个 页 面 的 路 径 、 名 称 及 功能 。 

(1) index.html: 网 站 的 主页 。 

(2) write.html: 网 站 栏目 “道听途说 ”的 链接 目标 ， 用 于 显示 日 忘 或 转贴 文章 。 

(3) message. html: 网 站 栏目 “ 语 过 添 情 ”的 链接 页 面 ， 显 示 一 个 留言 板 。 浏 览 
输入 留言 后 单 击 “ 提 交 ” 按 钮 ， 可 以 将 留言 发 送 给 网 站 制作 者 。 

(4) photo.html: 网 站 栏目 “伊人 风尚 ”的 链接 页 面 ， 显 示 网 站 相册 ， 并 播放 背景 
音乐 。 

(5) images\xiangce\index. html: 网 站 相册 的 索引 页 。 

其 中 ，images\xiangce 文 件 夹 是 制作 网 站 相册 时 指定 的 目标 文件 夹 。images\photo 文 
件 夹 放 置 生 成 相册 的 源 文 件 。 

(6) shop. asp: 网 站 栏目 “我 的 店铺 ”的 链接 页 面 ， 显 示 数 据 库 中 的 商品 编号 、 名 
称 、 类 别 及 图 厂 。 


[L11.2. 4 收集 整理 建站 资源 


了 解 了 网 站 的 主要 目录 结构 后 ， 束 可 以 创建 和 收集 需要 的 建站 资源 了 了。 一般 建站 资源 
包括 图 像 、 文 本 和 媒体 。 收 集 了 所 有 这 些 项 目 后 ,分门别类 地 存放 在 相应 的 文件 夹 中 ， 以 
便于 查找 和 管理 。 

一 个 杰出 的 网 站 与 实体 公司 一 样 ， 也 需要 整体 的 形象 包装 和 设计 。 准 确 的 、 有 创意 的 
CI 设计 ， 对 网 站 的 宣传 推广 有 事半功倍 的 效果 。 在 网 站 主题 和 名 称 定 下 来 之 后 ， 需 要 思考 
的 就 是 网 站 的 标识 。 网 站 的 标识 ， 即 网 站 Logo， 如 同 商品 的 商标 ， 可 以 使 网 络 浏览 者 易 于 
识别 和 便于 选择 网 站 。 一 个 好 的 Logo 往 往 会 反映 Web 及 制作 者 的 某 些 信息 ， 特 别 是 对 一 个 
商业 Web 来 讲 ， 可 以 从 中 基本 了 人 解 到 这 个 Web 的 类 形 。 

Logo 可 以 是 中 文 ， 英 文学 母 ， 可 以 是 符 写 ， 图 案 ， 也 可 以 是 动物 或 者 人 物 等 。 比 如 : 
IBM 是 用 IBM 的 英文 作为 标志 ， 新 浪 用 字母 sina+ 了 眼睛 作为 标志 ， 苹 果 用 一 只 苹果 作为 标志 ， 
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搜狐 用 一 只 卡通 狐狸 作为 标志 。 如 图 1-4 所 示 。 


图 1-4 ”和 常见 的 logo 
视觉 上 的 吸引 仅仅 是 web 设计 的 一 部 分 ， 为 了 让 读者 方便 地 获得 信息 ， 在 进行 Web 设 计 
时 ，Logo 的 形式 应 该 服从 功能 ， 形 式 的 设计 应 该 尽量 满足 功能 所 需 的 简明 、 清 晰 。 例 如 ， 
奥运 开办 时 ，Google 和 百度 的 肖 页 Logo 如 图 1-5 所 示 。 


hs 


SS 
人 E 


Bai' Bl 


Kll-5 奥运 开 群 1ogo 
为 了 便于 在 Internet 上 传播 信息 , 关于 Web 站 点 的 Logo, 国际 上 有 一 个 统一 的 标准 规范 。 
目前 网 站 Logo 有 以 下 三 种 规格 : 
(1) 88*31 一 一 这 是 互联 网 上 最 普 过 的 Logo 规 格 ， 茶 些 收集 Logo 的 站 点 所 收集 的 均 是 
这 种 规格 的 Logo。 
(2) 120*60 一 一 这 种 规格 用 于 一 般 大 小 的 Logo。 
(3) 120*90 一 一 这 种 规格 用 于 大 形 Logo。 
一 个 好 的 Logo 应 具备 以 下 的 几 个 条 件 ， 或 者 具备 其 中 的 几 条 : 
(1) 符合 国际 标准 。 
(2) 传达 Web 的 类 形 信 息 。 
(30 风格 独特 、 设 计 精 美 。 


LLli. 2.5 网 页 版 面 布局 与 设计 


网 站 建设 的 目的 是 为 用 户 服务 ， 因 此 应 根据 网 站 建设 的 目的 确定 网 站 的 布局 和 功能 。 
例如 ， 建 立 一 个 电子 商务 网 站 ， 就 要 根据 消费 者 的 需求 、 购 买 力 、 购 买 习 惯 等 要 素 设 计 网 
页 的 功能 。 

其 次 ， 网 站 上 的 内 容 并 不 是 大 量 的 信息 简单 地 堆积 ， 这 些 信息 必须 通过 一 定 的 形式 来 
体现 ， 这 就 是 网 站 结构 、 页 面 外 观 、 页 面 布局 等 。 同 时 ， 网 页 的 设计 要 考虑 到 网 页 的 加 载 
速度 ， 不 能 因为 网 页 的 加 载 时 间 过 慢 而 使 网 站 的 眼球 数 大 大 降低 。 因 此 ， 网 页 在 设计 上 切 
忌 使 用 过 多 、 过 大 的 图 片 和 过 多 的 表格 髓 套 。 

常见 的 网 页 布局 形式 大 至 有“ 厂 ” 字 形 、“ 口 ”字形 、“ 海 报 ” 形 、“ 同 ”字形 、“ 三 ” 
字形 和 “框架 ” 形 布 局 。 

1. ^*] " «JE 
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这 种 布局 最 上 方 是 标题 和 广告 条 ， 页 面 下 方 左 面 是 末 单 ， 石 面 显示 页 面 内 容 ， 整 体 上 
类 似 汉字 “ 厂 ”， 所 以 称 之 为 “三 ”学 形 布 局 。 这 种 布局 条 理 清晰 、 主 次 分 明 ， 非 常 适合 
初学 者 学 习 ， 但 略微 有 点 呆板 。 

2. *[" *JÉ 

这 种 布局 类 似 一 个 方 枉 ， 上 方 是 标题 或 广告 条 ， 下 方 是 版 权 信 息 ， 左 面 是 菜单 ， 右 面 
是 友情 链接 ， 中 间 是 网 页 效果 与 主要 内 容 ， 页 和 面 布局 紧凑 、 信 息 丰 宇 ， 但 四 面 封 用 ， 给 人 
一 种 压抑 的 感觉 。 

3.“ 同 ”字形 

这 是 一 些 大 形 网 站 首页 常用 的 类 形 ， 在 网 页 最 上 面 是 网 站 的 标题 以 及 BANNER 广 告 条 ， 
接 下 来 就 是 网 站 的 主要 内 容 ， 左 右 分 列 一 些 两 小 条 内 容 ， 中 间 是 主要 部 分 ， 与 左右 一 起 罗 
列 到 底 ， 最 下 面 是 网 站 的 一 些 基 本 信息 、 联 系 方式 、 版 权 声 明 等 。 

4. 海报 形 

这 种 布局 束 像 平时 见 到 的 海报 一 样 ， 中 间 是 一 幅 很 醒目 、 设 计 非 党 精美 的 图 片 ， 周 围 
点 级 看 一 些 图 片 和 文学 链接 。 这 种 设计 入 用 于 一 些 时 尚 类 和 公司 的 首页 ， 非常 吸引 人 。 但 


大 量 的 运用 图 片 导致 网 页 下 载 速度 很 怪 ， 而 且 提 供 的 信息 量 较 少 ， 如 图 1-6 所 示 。 


图 1-6 海报 形 布局 

5. “三 ”字形 

上 和 面 是 标题 或 广告 条 一 类 的 内 容 ， 下 和 面 是 正文 一些 文章 页 和 面 或 注册 页 面 通常 采用 这 
种 页 面 布局 方式 。 

6. “框架 ” 形 

这 是 一 种 左右 为 分 别 两 页 的 框架 结构 ， 一 般 左 而 是 导航 链接 ， 有 时 最 上 和 而 会 有 一 个 小 
的 标题 或 标致 ， 右 面 是 正文 ， 大 部 分 的 大 形 论坛 都 是 这 种 结构 的 ， 有 一 些 企业 网 站 也 喜欢 
采用 。 这 种 次 形 结构 非常 清晰 ， 一 目 了 然 。 但 是 这 种 结构 在 使 用 框架 时 有 个 问题 ， 即 不 容 
易 被 搜索 引擎 找到 。 如 果 考 虑 到 这 一 点 ， 尽 量 少 用 带 框 架 的 页 面 。 

总 之 ， 网 页 布局 设计 要 按照 网 站 的 实际 情况 ， 根 据 网 站 受众 的 喜好 来 设计 。 这 样 才能 
使 网 站 受到 更 多 人 的 欢迎 。 设 计 版 面 布局 之 前 可 以 先 画 出 版 面 的 布局 草图 ， 接 看 对 版 面 布 
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局 进行 细 化 和 调整 ， 反 复 细 化 和 调整 后 确定 最 终 的 布局 方案 。 


LL]1. 2.6. 测试 网 站 


在 确定 好 网 页 的 目标 、 功 能 、 风 格 及 整理 好 素材 后 丈 可 以 及 用 多 种 方法 和 网 页 制作 工 
其 进行 网 页 的 制作 。 同 时 ， 为 了 你 证 网 页 的 正确 性 ， 当 网 页 设计 人 员 制 作 完 所 有 页 面 后 ， 
需要 对 所 设计 的 网 页 进行 审 碍 和 测试 。 主 要 进行 网 页 的 功能 性 测试 、 完 整 性 测试 和 安全 性 
训 试 。 


[Ll1.2. 7. 发 布 与 推广 网 站 


在 成 功 进行 完 上 面 的 几 个 步骤 后 ， 网 站 中 的 网 页 束 可 以 发 布 到 Internet 中 ， 供 人 们 访 
问 。 在 发 布 网 站 之 前 ， 必 须 先 申 请 域名 和 空间 ， 以 标识 和 存放 您 的 网 站 。 

域名 是 网 站 在 网 络 上 存在 的 标志 ， 对 于 企业 开展 电子 商务 具有 重要 的 作用 ， 被 状 为 网 
络 时 代 的 “环球 商标 ”， 一 个 好 的 域名 可 以 大 大 增加 企业 在 互联 网 上 的 知名 度 。 

申请 完 空 间 和 域名 后 , 就 可 以 将 网 站 上 传 到 服务 占 ， 让 浏览 者 看 到 。 读者 可 以 利用 FTP 
软件 ， 也 可 以 使 用 Dreamweaver 进 行 上 传 。 有 关 用 Dreamweaver 上 传 发 布 网 站 的 其 体操 作 步 
又 请 参见 本 书 第 3 章 有 的 介绍 。 

网 站 做 好 后 必须 推广 才能 为 更 多 的 网 民 所 知道 ， 推 广 网 站 的 目的 是 提高 网 站 的 访问 量 
并 达到 使 用 网 络 进行 营销 的 目的 。 网 站 推广 的 手段 有 很 多 ， 主 要 的 推广 技巧 有 : 搜索 引擎 
注册 、 电 子 邮 件 宣 传 、BBS 宣 传 、 注 册 加 入 行业 网 站 、 网 站 合作 、 论 坛 留言 、 新 闻 组 、 互 
换 广告 条 、 传 统 方式 推广 和 网 络 广告 等 。 由 于 篇 幅 限 制 ， 本 书 不 作 详 细 介 绍 ， 感 兴趣 的 读 
者 可 以 参阅 相关 资料 。 


Jd 


Dreamweaver CS5 人 简介 


Dreamweaver 最 早 是 Macromedia 公司 开发 的 用 于 网 
页 制作 和 站 点 管理 的 一 款 “ 所 见 即 所 得 ”的 网 页 编辑 工具 ， 
它 将 可 视 布局 工具 、 应 用 程序 开发 功能 和 代码 编辑 支持 组 
合 在 一 起 , 使 得 各 个 层次 的 开发 人 员 和 设计 人 员 都 能 够 快 
速 创建 界面 精美 的 、 基 于 标准 的 网 站 和 应 用 程序 ， 其 直观 
性 与 高 效 性 是 很 多 网 页 编辑 工具 无 法 比拟 的 ， 与 Flash、 
Fireworks 并 称 为 网 页 制作 梦幻 组 合 。 

最 新 推出 的 Dreamweaver CS5 起 向 于 为 用 快捷 ， 开 发 
环境 精简 而 高 效 ， 由 于 与 Adobe CS Live 在 线 服务 Adobe 
BrowserLab 集成 ， 开 发 人 员 能 以 可 视 方式 或 直接 在 代码 
中 进行 设计 , 使 用 内 容 管 理 系统 开发 页 面 并 实现 精确 的 浏 
览 器 兼容 性 测试 。 


00600 


初次 月 动 


Dreamweaver CS5 


Dreamweaver CS5 的 窗口 组 成 


@ 文件 操作 
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安装 完 Dreamweaver CS5 简 体 中 文 版 之 后 ， 双 击 架 面 上 的 Adobe Dreamweaver CS5 图 标 ， 
或 执行 “开始 ”/ “程序 ”/“Adobe Dreamweaver CS5” 命 令 ， 即 可 启动 Dreamweaver CS5 
简体 中 文 版 。 第 一 次 启动 Dreamweaver CS5 时 ， 会 弹出 如 图 2-1 所 示 的 “默认 编辑 器 ”对 话 
枉 ， 用 户 可 以 根据 个 人 喜好 将 Dreamweaver CS5 设 置 为 指定 文件 类 型 的 默认 编辑 器 。 


Adobe Dreamweaver CS5 将 其 自身 设置 为 以 下 人 识 件 类 型 的 默认 编辑 器 : 


[v]Active Server Pages (asp) [v] JavaScript (js) 
[]Java Server Pages (jsp) [v] EdkHESESE (CSS) 
[v]ColdFusion (cfm, cfc) [v 可 扩展 标记 语言 (xm1) 


[]ASP.NET (aspx, ascx) [v]XsL 样式 表 (xsl, xslt) 
[v]PHP (php, php3, php) 


取消 全 选 


图 2-1 "SAUL X ITE 


TRibocTEZSTR DUE E XeRE, BUnpIXGHAHNMUBJOCTESSTM. fab "gx TRSHBUnRIXEA 
Dreamweaver CS5 的 用 户 界 面 。 


局 动 Adobe Dreamweaver CS5 人 简体 中 文 版 (以 下 简称 Dreamweaver CS5) 之 后 ， 默 认 显 
示 Dreamweaver 的 欢迎 界面 ， 如 图 2-2 所 示 。 


Dw 


| sump —] Q ese 
xmi ap xci mA) Na) MU» evi Xen) Wu) Men 


— Ru ima E " a 
"ETT TT ELT RUSSE E aM 
e ns t Wn lal C55 MIEL: ; 


iut cu BHL 
EE LTTT MATCHTI cs M. 


TOLL 
ewe 


Adobcf Docaerecineectii CES 
Lid Ll I nA 34 TI 


图 2-2 Dreamweaver CS5 欢 迎 界 面 
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该 界面 用 于 打开 最 近 使 用 过 的 文档 或 创建 新 文档， 还 可 以 从 中 通过 产品 介绍 或 教程 了 
解 天 于 Dreamweaver 的 更 多 信息 。 如 果 不 和 希望 每 次 局 动 时 都 打开 这 个 界面 ， 可 以 在 “ 首 
选 参数 ”对 话 框 中 修改 设置 。 

单 击 欢迎 界面 上 “新建 ”栏目 下 的 文档 类 型 ， 或 执行 “文件 ”/“ 狐 建 ” 命 令 ， 在 打 
开 的 “新 建文 要 ”对 话 框 中 选择 “ 衬 昌 页 ”类 别 的 HIML 基 本 项 ， 然 后 选择 布局 栏 的 “无 ”， 
单 击 “ 人 创建” 按钮 进入 Dreamweaver CS5 中 文 版 的 工作 界面 ， 如 图 2-3 所 示 。 

蛙 击 “设计 器 ”按钮 训 时 ”， 在 弹出 的 下 拉 列 表 中 可 以 看 到 Dreamweaver CS5 推 出 的 
八 种 工作 区 外 观 模 式 。 不 同 的 工作 区 外 观 模式 适用 于 不 同 层 次 或 喜好 的 设计 者 。 无 论 是 一 
个 程序 员 还 是 一 个 设计 师 ， 都 可 以 在 Dreamweaver CS5 给 出 的 工作 区 外 观 模 式 中 找到 合适 
的 页 面 设计 模式 。 

单 击 [名 Gtve | 按钮 ， 可 以 访问 Adobe® Creative Suite® 5 在 线 服务 联系 社区 、 进 行 协 
作 以 及 充分 利用 Adobe 工具 。 


从 
| CD 修改 人 格式 (0) — r$ (C) 站 点 (S) ”窗口 (如 


有 [代码 | 拆 分 ] 设计 | [本 v. (c | CS Live 服 务 


XE^S 地址 : -一 一 


文档 工具 栏 


浮动 面板 组 


属性 面板 


[RI A Io0% v743 x 462v 1 K fh Wnicode (UTF-8) 


属性 
[Omm] XO 
Bs CSS ID) 


Drei... zs Tm B 


2-3 Dreamweaver CS5 的 工作 环境 


[L]o. 2. 1 菜单 栏 


通 币 ,从 一 个 软件 菜单 的 多 少 可 以 看 出 这 个 软件 功能 的 大 小 。 同 样 , 从 Dreamweaver CS5 
楷 复 的 肝 单 可 以 看 出 其 功能 的 庞大 和 完善 。 与 大 多 数 软件 类 似 ，Dreamweaver CS5 的 末 单 
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栏 位 于 工作 环境 最 上 方 ， 如 图 2-4 所 示 。 
文件 他 ) 编辑 信 ) 查看 (WW 插入.(I) dE) — dux) — r$ 0c) XE) ID) — 8EBhOD 


Kl2-4 3m 


[L]o.2.2 文档 工具 栏 


Dreamweaver CS5 的 文档 工具 栏 主要 集中 了 一 些 铝 用 的 页 面 操 作 命令 ， 可 以 用 不 同 的 
方式 来 得 看 文档 窗口 或 者 预览 设计 效 末 ， 如 图 2-5 所 示 。 
| Ra | deg | 设计 | | 实时 代码 | 丘 光 | 实时 视图 | 检查 (p (0 标题 puempons 00 | M 


图 2-5 工具 栏 


该 工具 栏 中 各 个 按钮 图 标的 功能 简 述 如 下 : 
e 切换 到 代码 视图 ， 显 示 当 前 文档 的 代码 ， 如 图 2-6 所 示 。 在 代码 视图 中 
可 以 编辑 插入 的 脚本 ， 对 脚本 进行 检查 、 调试 等 。 
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| 有 = 站 


— 
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laci 13 31 IALI 
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| 至 11 SR EW TNI 
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irm I PAREM HRHMERB"RMTIRLTASTU a VALUE 
| m l3 Ta UT wi7ri DORT 
Tz nir FL I37408 2 "5 PFALLM-UDRLNT TI he 
I :: YEE- applicat eut 
| ”| SHCa" seg .es" 
IP As 
| i3 WIDIl-234 
IE 慨 扯 HEIGHIa427 
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| 下 下 村 
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| ires mgri . WEQ v Ep — BEI 
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图 2-6 ”代码 视图 


e 加 全 t|， 切 换 到 设计 视图 ， 显 示 的 内 容 与 浏览 器 中 显示 的 内 容 相同 ， 如 图 2-7 所 
不 。 

在 “设计 ”视图 中 ， 使 用 Dreamweaver CS5 提 供 的 工具 或 命令 ， 读 者 可 以 方便 地 进行 
创建 、 编 辑 文档 的 各 种 工作 ， 即 使 完全 不 懂 HTML 代 码 的 读者 也 可 以 制作 出 精美 的 网 页 

e ”| 加 把 ， 在 同一 屏幕 中 显示 代码 和 设计 视图 。 

在 编写 文档 中 ， 有 了 时候 读者 可 能 必须 兼顾 设计 样式 和 实现 代码 ， 这 时 候 就 要 需要 代码 
与 设计 同 屏 显示 。 单 击 里 办 按钮 ， 就 可 以 实现 这 个 功能 ， 如 图 2-8 所 示 。 这 样 同 一 文档 的 
两 种 视图 就 可 以 在 同一 窗口 中 得 到 对 照 显 示 ， 并 且 读者 选中 设计 视图 或 者 代码 视图 中 的 部 
分 时 ， 在 另外 的 代码 视图 或 者 设计 视图 中 也 会 选中 相同 的 部 分 。 例 如 ， 在 图 2-8 选 中 汽车 
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FE 1- 2 
Dreamweaver CS5 简 介 P 24] 


图 片 ， 那 么 在 代码 视 图 中 相应 的 代码 将 以 珀 乓 显示 。 
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图 2-7 设计 视图 
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图 2-8 ”代码 /设计 视图 
Dreamweaver CS5 界 面 顶端 的 “布局 ”按钮 国 " 用 于 设置 页 面 的 布局 ， 与 工作 区 顶端 的 


ejf | an | 国 交 +| 按 钮 功能 相同 。 如 果 界面 顶端 没有 显示 布局 、 扩 展 Dreamweaver 和 站 点 功 
能 按钮 ， 可 以 选择 “窗口 ”/“ 应 用 程序 栏 ”菜单 命令 显示 这 三 个 功能 按钮 。 
执行 “ 奋 看 ”/“ 垂 直 拆 分 ” 表 单 命令 ， 用 户 还 可 以 垂直 分 割 文档 窗口 ， 即 代码 视图 
和 设计 视图 以 垂直 对 比 的 方式 呈现 。 如 图 2-9 所 示 。 
执行 “查看 ”/“ 左 侧 的 设计 视图 ”有 玉音 命令， 可 以 设置 拆 分 模式 下 设计 视图 显示 在 
界面 左 侧 或 右 侧 。 
e 和 在 “设计 ”视图 或 “ 拆 分 ”视图 下 ， 单 击 该 按钮 可 以 在 不 打开 一 个 新 
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的 浏览 如 窗 口 的 迟 况 下 实时 预 多 页 面 的 效果 。 再 次 单 击 该 按钮 ， 即 可 返回 到 可 编 
答 的 “设计 ”视图 或 “ 拆 分 ”视图 。 
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图 2-9 垂直 拆 分 代码 /设计 视图 


“实时 视图 ”与 传统 的 Dreamweaver“ 设 计 ” 视 图 的 不 同 之 处 在 于 ， 它 提供 页 面 在 某 
一 浏览 器 中 的 不 可 编辑 的 、 更 逼真 的 呈现 外 观 。 事 实 上 ， 从 “设计 ”视图 切换 到 “实时 视 
图 ”， 只 是 在 可 编辑 的 “设计 ”视图 和 不 可 编辑 的 “设计 ”视图 之 则 进行 切换 ，“ 代 人 码 ” 
视图 保持 可 编辑 状态 ， 因 此 可 以 更 改 代 码 ， 然 后 刷新 “实时 视 见 ”， 呈 现 的 屏幕 内 容 会 立 
即 反 映 出 对 代码 所 做 的 更 改 。 
如 果 在 “代码 ”视图 下 单 击 该 按钮 ， 则 Dreamweaver 的 工作 界面 自动 转换 为 “ 拆 分 ” 
TILES] 
e gH， 在 “实时 视图 ”中 单 击 该 按钮 ，Dreamweaver 将 以 黄色 突出 显示 浏览 
器 为 呈现 该 页 面 而 执行 的 代码 版 本 ， 此 代码 是 不 可 编辑 的 ， 如 图 2-10 所 示 。 再 
J Se a 可 编辑 的 视图 。 
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图 2-10 ”查看 页 面 的 实时 代码 
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“实时 代码 ”视图 中 显示 的 代码 类 似 于 从 浏览 器 中 查看 页 面 源 时 显示 的 内 容 。 
e “标题 ”: 设置 文档 的 标题 ， 即 代码 视图 中 《title>…</title>》 标 签 之 间 的 内 容 。 
e JUL. 文件 管理 下 拉 菜 单 。 

e ”图 .: 在 浏览 器 中 预览 、 调 试 页 面 制作 效果 。 

e C. 刷新 设计 视图 。 

o 8L. A E EX P PXLSESR. 

e 

e 


C. RDWMEBITE Ehud. RTEUUR AS ESTO RT WULCBIBIOE E HE CIT. 
十 面 ， 路 浏览 器 兼容 性 检查 的 下 拉 菜 单 。 


从 菜单 栏 中 选择 “查看 ”/“ 工 具 栏 ” /“ 文 档 ” 命 令 ， 可 以 打开 或 关闭 文档 工具 栏 。 
选择 “查看 ”/“ 工 具 栏 ”/“ 标 准 ” 命 令 ， 可 以 打开 或 关闭 Dreamweaver CS5 的 常用 工具 
3 如 图 2-11 上 所 示 。 


Uh Au una Es 


图 2-11 常用 工具 栏 


该 工具 栏 中 各 个 按钮 图 标的 功能 简 述 如 下 : 

e 0: 单 击 该 按钮 ， 打开“ 新 建文 档 ” 对 话 框 。 

e 3. 打开 一 个 文档 。 

e Uu. 打开 Adobe Bridge CS5， 通 过 搜索 元 数据 标签 ， 为 访问 管理 文件 、 应 用 程 
序 和 设置 提供 了 中 央 控 制 。 它 也 为 访问 Adobe Stock 服务 提供 了 支持 。 

e 加; 保存 所 有 打开 的 文档 。 

e -—. 打印 代码 。 

e ^7. BUB tp. 

e ^5. 复制 当前 所 选 内 容 。 

e 0. 粘贴 剪贴 板 中 的 内 容 。 

e ^. 撤消 上 一 步 操 作 。 

e ^ 重 做 上 一 步 操作 。 


[jp. 2.3 “插入 ”面板 


月 Dreamweaver CS4 开 始 ，Dreamweaver 将 “搬入 ” 栏 整 合成 了 一 个 浮动 面板 。 由 于 衣 
面板 是 Dreamweaver 页 面 设计 中 第 用 的 一 个 面板 ， 因 此 本 书 仍 将 其 作为 Dreamweaver 界 面 组 
成 的 一 部 分 进行 介绍 。 

单 击 文档 窗口 右 侧 浮动 面板 组 中 的 “插入 ”按钮 ， 即 可 弹出 以 前 熟悉 的 “插入 ”和 面板， 
如 图 2-12 所 示 。 

“插入 ”和 面板 共有 8 类 对 象 元 素 ， 包 含 一 些 最 常用 的 项 目 : 常用 、 布 局、 表单 、 数 据 、 
Spry. InContext Editing、 文 本 和 收藏 严 。“ 插 入 ”面板 的 初始 视图 为 “利用 ”面板 ， 
单 击 “ 插 入 ”面板 中 “各 用 ”面板 右 侧 的 倒 三 角形 按钮 ， 即 可 在 弹出 的 下 拉 列 表 中 选择 需 
要 的 面板 ， 从 而 在 不 同 的 面板 之 间 进 行 切换 ， 如 图 2-13 上 所 示 。 
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Eh 
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常用 了 
超级 链接 
电子 邮件 链接 
命名 锚 记 
表格 
插入 Div 标签 
~ 图 像 
~ 霸 体 
日 期 
服务 器 端 包括 


6» |) £ 


F2 EB d |) E) [3 


图 2-12 “插入 ” 栏 图 2-13 在 不 同 面板 之 间 进 行 切换 


如 条 要 在 文档 中 添加 东 一 个 对 象 ， 打 开 相 应 关 别 的 插入 面板 ， 然 后 单 击 相 应 的 网 标 即 
可 。 

堆 认 状态 下 ，“ 插 入 ”和 面板 中 的 对 象 图 标 以 灰色 显示 ， 将 鼠标 移动 赂 标 上 时 显示 为 彩 
色 。 如 末 用 户 习 惯 于 彩色 图 标 ， 可 以 打开 如 图 2-13 右 图 所 示 的 下 拉 列 表 之 后 ， 单 击 “颜色 
图 标 ” 命 令 ， 即 可 以 彩色 显示 对 象 图 标 ， 如 图 2-14 所 示 。 


BE 
a o7 


超级 链接 
电子 邮件 链接 
命名 锚 记 

水 平 线 

表格 

插入 Div 标签 
图 像 

媒体 

日 期 
服务 器 端 包括 


DE ZEE 


Ey EB éd» |] CU [3] [i Ge 


Kl2-14 DEC So IT] " RIT RE 图 2-15 隐藏 标签 的 “第 用 ” 栏 


如 条 单 击 下 拉 列 表 中 的 “隐藏 标签 ”命令 ， 即 可 只 显示 对 象 图 标 ， 如 网 2-15 所 示 。 


[L]o. 2.4 工作 区 


文档 窗口 是 Dreamweaver 的 主 工 作 区 ， 用 于 显示 当前 创建 或 者 编辑 的 文档 ， 可 以 根据 
用 户 选择 的 显示 方式 不 同 而 显示 不 同 的 内 容 。 如 图 2-16 所 示 ， 界 面 中 显示 设计 或 代码 的 区 
域 即 为 工作 区 。 

整个 文档 窗口 可 以 分 为 起 右 两 个 大 的 部 分 ， 堪 边 是 工作 区 域 ， 右 边 是 提供 帮助 的 浮动 
面板 组 。 展 开 右 侧 的 序 动 面板 组 之 后 ， 拖 动 两 部 分 中 间 的 分 界 栏 可 以 调整 和 起 右 两 部 分 的 宽 
度 。 


LL]o. 2. 5 状态 栏 


Dreamweaver CS5IPUUS LN I OCA BS. BÁEUBILTGRENHJLH: 标签 选择 器 、 
fi LACK NSREH SE HEURE P BZ Re 2 24H] RARUS. zRUIBIAVh. SUE 
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传输 时 间 每 。 如 图 2-17 所 示 。 


交 件 (四 ”编辑 FE)  fUBQO 插入 局 deoROD 格式 (0) 命令 (中 ”站 点 (8)  wEIQO  BBhOD 
汽车 之 家 _ 我 的 汽车 网 站 ， 我 的 汽车 之 家 . hta D:\ 汽 车 之 家 _ 我 的 汽车 网 站 ,我 的 汽车 之 家 . htm 


Adobe BrowserLab 


oo ] 标题 : 汽车 之 家 我 的 污 让 网 站 ， E E dem 


HY 
ws 超级 链接 ^| 
[-] 电子 邮件 链接 
mm i1 


国 . 
雪铁龙 C5 频道 gus 
ir 图 库 论坛 报价 B 
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图 2-16 ”文档 窗口 


二 ABE EE ACRES A Ps vp PARET 
"body? Ctable? Ctr? Ct» [Ct able. text? (k]és Q nc d TU 538. 339 K / 480 9^ Wpi$rpir (cE2312) 
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图 2-17 状态 栏 


下 面 对 状 态 栏 中 各 个 功能 区 进行 简单 地 介绍 。 

急 ” 标签 选择 天 

显示 当前 选 定 内 容 的 标签 的 层次 后 构 。 单 击 该 层次 结构 中 的 任何 标签 ， 可 以 选中 页 面 
上 相应 的 区 域 。 例 如 ， 单 击 《body> 标签 可 以 选择 文档 的 全 部 正文 。 

9 XH LA 

Sabi Eb n] EUR HZ TE LA. 

TELE 

司 用 手 形 工具 之 后 , 在 文档 上 单 击 并 按 下 鼠标 无 键 移 动 , 可 以 在 文档 衫 口中 拖 动 文 档 。 
单 击 选取 工具 可 茶 用 手 形 工具 。 

€ "i LEGE AE 

XLHAHdE'"W WE BRA. HOTGXENOCRUDIARAXEUSE. DAUEUCEEUETT] PR RR 
硬度 、 更 加 轻松 地 选择 小 项 目 、 使 用 小 文本 设计 页 面 和 设计 大 页 面 等 等 。 

单 击 选中 缩放 工具 全 之 后 ， 执 行 下 列 操作 之 一 可 以 放大 文档 : 
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在 页 面 上 需要 放大 的 位 置 单 击 ， 直 到 获得 所 需 的 放大 比率 。 

在 页 面 上 需要 放大 的 区 域 上 拖 出 一 个 框 ， 然 后 释放 鼠标 按钮 。 

从 “缩放 比率 ”弹出 陈 来 单 中 选择 一 个 预先 设置 的 缩放 比率 。 
e 在 “缩放 比率 ”文本 框 中 键入 一 个 缩放 比率 后 按 Enter 键 。 

若 要 缩小 文档 ， 可 以 单 击 选中 缩放 工具 他 之 后 ， 按 下 Alt (Windows) 键 或 Option 
(Macintosh) 键 的 同时 在 页 面 上 单 击 。 

如 末 硕 望 将 页 面 上 选 定 的 内 容 质 充 整 个 文档 窗口 ， 可 以 在 “缩放 比率 ”弹出 式 某 单 中 
选择 “符合 所 选 ” 命 令 ; 如 采 和 希望 用 整个 页 面 项 充 文 档 窗 口 ， 则 选择 “符合 全 部 ”命令 ; 
如 末 布 望 页 面 显示 的 宽度 与 文档 窗口 的 宽度 相符 ， 则 选择 “符合 宽度 ”命令 。 

缩放 文档 后 ， 单 击 状态 栏 上 的 选取 工具 ， 即 可 在 缩放 后 的 页 面 上 进行 编辑 。 

9 窗口 大 小 

和 窗口 大 小 弹出 式 末 单 仅 在 “设计 ”视图 下 可 见 ， 用 于 调整 “文档 ”窗口 的 大 小 到 预定 
义 或 目 定 义 的 太 寸 ， 以 像素 为 单位 。 

通过 “窗口 大 小 ”弹出 采 单 ， 网 页 设计 者 可 以 但 看 页 耐 在 不 同 分 辨识 下 的 视图 显示 情 
况 。 显 示 的 窗口 大 小 反映 浏览 器 窗口 的 内 部 矿 寸 〈 不 包括 边框 》， 显 示 器 大 小 列 在 括号 中 。 
例如 ， 如 果 访 问 者 可 能 按 其 默认 配置 在 分 养 京 为 640 X 480 的 显示 右上 使 用 Microsoft 
Internet Explorer 或 其 他 浏览 器 ， 则 设计 页 面 时 应 使 用 “536 x196 (640 X 480, EX 
认 ) ”的 大 小 。 
注意 : 在 Windows 中 ， 用 户 可 以 将 “文档 ”窗口 最 大 化 以 便 它 填 充 集成 窗口 的 整个 文档 区 域 ， 此 时 无 法 
调整 它 的 大 小 。 

€ ”文档 大 小 /估计 下 载 时 间 

在 状态 栏 上 , 文档 大 小 和 下 载 时 间 区 域 显 示 当 前 编辑 文档 的 大 小 (以 千 学 六 为 单位 )， 
以 及 该 文档 在 Internet 上 被 完全 下 载 的 预计 时 间 。 针 对 不 同 的 下 载 速 率 ， 下 载 时 间 当 然 也 
不 相同 , 用 户 可 以 在 “首选 参数 "对话 框 中 设置 计算 下 载 时 间 的 连接 速度 (以 KB/Ss 为 单位 ) 。 

€ Winds 

该 区 域 显示 当前 文档 的 文本 编码 。 


[Llo. 2. 6 属性 面板 


ftDreamweaver CS5 中 ， 选 中 某 一 个 对 象 之 后 ，“ 属 性 ”面板 将 显示 被 选中 对 象 的 属 
性 。 用 户 还 可 以 在 属性 面板 中 修改 被 选 对 象 的 各 项 属性 值 。 属 性 面板 如 图 2-18 所 示 。 


| 元 - 2x GENEUETTITT? 单 击 说 按钮 可 展开 E 
2 | te "o Beo 或 折 得 尾 性 面板 = 
[e] EGO GORGE v| X ix GG UI] RUSAGD 站 LX 

i 4HDEU w| m 1 dEBoDII 


图 2-18 ”属性 面板 
单 击 属性 面板 右上 方 的 电 图 标 ， 可 以 打开 Adobe Dreamweaver CS5 的 帮助 文件 ， 并 显 
示 与 当前 操作 相关 的 帮助 信息 。 
单 击 属性 面板 右 侧 的 苏 图 标 ， 可 以 打开 快速 标签 编辑 器 ， 编 辑 页 面 标签 。 
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单 击 属性 面板 右上 和 角 的 国税 标 ， 在 弹出 的 下 拉 列 表 中 选择 “关闭 ”或 “关闭 标签 组 ” 
命令 则 可 以 在 界面 上 隐藏 属性 面板 ， 如 条 要 显示 属性 面板 ， 可 以 执行 “窗口 ”/“ 属 性 ” 
菜单 命令 。 

属性 面板 一 般 分 成 上 下 两 部 分 。 不 同 的 对 象 有 不 同 的 属性 ， 因 此 选中 不 同 对 象 时 ， 属 
性 面板 显示 的 内 容 是 不 相同 的 。 单 击 面板 在 下 角 的 兰 按钮 可 以 关闭 属性 面板 的 下 部 分 ， 单 
击 后 效 订 如 网 2-19 兵 未。 

导线 am 


[<> HmL| "X Xx v 类 无 w| BI iine HD 
llis css ID 无 vi BRE vla 目标 (6) 


图 2-19 ”下 半 部 分 折合 后 的 属性 面板 
这 时 原来 的 去 按钮 变 成 马 按 钮 ， 单 击 此 按钮 可 以 重新 打开 属性 面板 的 下 部 分 。 


[1j2. 2.7 浮动 面板 


在 Dreamweaver CS5 工 作 环 境 的 右 侧 存在 大 许多 浮动 面板 。 启 动 Dreamweaver CS5 后 ， 
有 些 浮动 面板 已 经 打开 ， 更 多 的 则 没有 显示 。 这 些 面 板 可 以 自由 地 在 界面 上 拖 动 ， 也 可 以 
将 多 个 面板 组 合 在 一 起 ， 成 为 一 个 选项 卡 组 ， 在 默认 的 情况 下 ，Dreamweaver CS5 中 的 浮 
动 面板 都 是 成 组 排列 于 工作 环境 的 右 侧 ， 并 且 上 自动 排 齐 。 

在 溪 单 栏 中 的 “和 窗口” 下拉 玉 单 中 单 击 面板 名 称 可 以 打开 或 者 关闭 这 些 面 板 。 例 如 ， 
要 打开 “行为 ”面板 可 以 执行 “窗口 ”/“ 行 为 ”命令 。 

下 面 简 要 介绍 一 下 各 个 面板 的 功能 。 


e CSS 样式; 定义、 编辑 CSS 样式 。 

e AP 元 素 : 管理 页 面 中 的 AP 元 素 ， 如 AP 元 素 的 显示 与 隐藏 、 堆 有 登 顺序 等 。 

e 数据库: 新 建 、 修 改 、 删 除数 据 库 的 连接 。 

e Jr: 管理 数据 集 ， 添 加 各 种 变量 等 。 

e 服务 器 行为 : 利用 数据 集 生 成 各 种 服务 器 端的 行为 。 

e 组 件 : 管理 预 置 的 页 面 组 件 。 

@ 文件: 管理 本 地 计算 机 的 文件 及 站 点 文件 。 

e Ys: 管理 站 点 资源 ， 比 如 模板 、 库 文件 、 各 种 媒体 、 脚 本 等 。 

e Un: 收集 、 分 类 一 些 非常 有 用 的 小 代码 ， 以 便 以 后 反复 使 用 。 

e Lira: 方便 用 户 添 加 标签 的 各 项 属性 、 帮 助 书写 代码 ， 也 可 以 帮助 检查 代 
人 码 书写 是 否 正 确 。 

e 行为 : 为 页 面 元 素 添 加 、 修 改 Dreamweaver 预 置 的 行为 和 事件 。 


e ”结果 提供 HTML、CSS、ASP、JSP 等 一 系列 代码 的 参考 资料 、 查 找 和 蔡 换 、 验 证 
是 否 有 代码 错误 、 检 查 各 种 浏览 器 对 当前 文档 的 支持 情况 、 检 验 是 否 存在 断 点 链 
接 、 生 成 显示 站 点 报告 、 记 录 FTP 登录 和 操作 信息 ,以 及 站 点 服务 器 的 测试 结果 ， 

e ”历史 记录 显示 了 从 打开 或 者 创建 当前 文档 开始 所 执行 的 所 有 操作 步骤 ， 利 用 它 
可 以 用 来 撤销 一 个 或 者 几 个 步 又， 并 可 将 选 定 步骤 自动 应 用 于 其 他 页 面 元 素 ,或 
另存 为 命令 ， 以 便 重复 使 用 。 
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注意 : “历史 记录 ”面板 只 有 在 设计 视图 中 才能 使 用 ， 在 代码 视图 下 ， 此 面板 是 无 效 的 。 在 代码 视图 中 
更 改 了 文档 ， 不 会 在 “历史 记录 ”面板 中 留 下 记录 ， 当 然 也 就 无 法 撤销 操作 了 。 
e 框架: 管理 页 面 框 染 。 
e Jta: 在 单独 的 编码 窗口 中 合 看 、 编 写 或 编辑 代码 ， 束 像 在 “代码 ”视图 
中 工作 一 样 。 还 可 以 但 看 代码 中 所 有 JavaScript 或 VBScript 函数 的 列表 ， 并 
跳 转 到 其 中 的 任意 函数 。 
e 扩展 : (t Dreamweaver 中 添加 和 管理 扩展 功能 。 
扩展 功能 是 一 些 可 以 很 容易 地 添加 到 Dreamweaver 中 的 新 功能 ， 例 如 用 于 重新 设置 
表格 格式 、 连 接 到 后 问 数 据 库 或 者 帮助 用 户 为 浏览 右 搂 写 脚 本 的 扩展 功能 。 如 和 果 要 答 找 
Dreamweaver 最 新 的 扩展 功能 ， 可 以 登录 Adobe Exchange Web 站 上 点， 网 址 为 
www. adobe. com/go/dreamweaver exchange cn/ 。 
注意 : 在 安装 扩展 功能 前 必须 安装 功能 扩展 管理 器 。 功 能 扩展 管理 器 是 一 个 独立 的 应 用 程序 ， 可 用 于 安 
装 和 管理 Adobe 应 用 程序 中 的 扩展 功能 。 如 果 要 在 多 用 户 操作 系统 中 安装 所 有 用 户 都 能 访问 的 扩展 功 
能 ， 必 须 以 管理 员 身 份 (Windows) 或 Root 身份 (Mac OS X) 登录 。 
从 上 和 面 的 介绍 可 以 看 出 ，Dreamweaver 的 和 面板 综合 起 来 功能 极其 强大 。 细 心 的 读者 可 
能 会 发 现 ，Dreamweaver 早 期 版 本 中 存在 的 时 间 轴 在 Dreamweaver CS5 中 已 不见 躁 影 了 。 为 
了 提升 程序 效能 ， 以 及 更 容易 开发 和 维护 系统 ，Dreamweaver CS5 在 推出 新 技术 的 同时 也 


Dreamweaver CS5 三 个 重要 的 功能 分 别 是 网 页 设计 、 代 人 码 编写 和 应 用 程序 开发 ， 相 应 
的 浮动 面板 也 可 以 这 样 分 类 。Dreamweaver CS5 的 浮动 面板 继承 了 以 前 版 本 的 面板 属性 ， 
可 以 方便 地 拆 分 和 组 合 。 下 面 以 将 “AP 元 妹 ” 面 板 从 “CSS 样 式 ” 面 板 组 中 拆 分 出 来 ， 然 
后 合并 到 “插入 ”面板 组 为 例 ， 详 细 介 绍 拆 分 和 组 合 面 板 的 操作 方法 。 

(1) XejE "ELI" / "APZUSR" áp. 117F "APZUR" IH. 

(2) 单 击 “AP 元 素 ” 面 板 的 标签 ， 按 下 芯 标 左 键 ， 然 后 拖 动 到 合适 的 位 置 ， 释 放 鼠 
标 。 此 时 “AP 元 素 ” 面 板 成 为 一 个 独立 的 面板 ， 可 以 在 工作 界面 上 随意 拖 动 。 如 图 2-20 上 所 
7e 


(3) 单 击 “AP 元 系 ” 和 面板 的 标签 ， 按 下 鼠标 左 键 ,然后 拖 动 到 浮动 面板 组 中 “插入 ” 
面板 的 下 方 ， 此 时 ，“ 插 入 ”面板 的 端 将 显示 一 条 贤 色 的 粗 线 ， 表 示 “AP 元 系 ” 和 面板 将 到 
达 的 目的 位 置 。 释 放 鼠 标 ， 即 可 将 “AP 元 素 ” 面 板 重新 排列 在 译 动 面 板 中 ， 如 网 2-21 所 示 。 
此 时 ， 单 击 浮动 面板 

元 未 上 


组 中 的 “AP 元 么 ”面板 ， 即 可 展开 面板 组 ， 如 图 2-22 所 示 。 


圈 插入 


AP 3D 
in css 样 式 


5 文件 
"E. 


< 只 标签 … 


图 2-20 分离 出 的 “AP 元 素 ” 面 板 图 2-21 组 合 AP 元 素面 板 图 2-22 ”展开 面板 组 
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AElrBnpégdi, "APZUR" IBHRCCUONI "TED. TRUBRCEH X7 RU RC, — EP TEC. DUC 
的 标签 ， 即 可 在 “插入 ”和 面板 和 和 “AP 元素 ”面板 之 间 进 行 切 换 。 

在 实际 使 用 中 ， 应 该 根据 目 己 的 设计 习惯 ,将 当 用 的 和 面板 组 合 在 一 起 ， 并 放 在 适当 的 
地 方 ， 以 配置 出 最 适合 于 个 人 使 用 的 工作 环境 。 


[Liz. 2.8 标尺 、 网 格 与 辅助 线 


使 用 标尺 、 网 格 和 辅助 线 可 以 很 方便 地 布局 对 象 ， 并 能 了 解 编 辑 对 象 的 位 置 。 

1. 标尺 

选择 “ 合 看 ”/“ 标 尺 ”/“ 显 示 ” 命 令 即 可 显示 标尺 。 在 文档 编辑 禄 口 拖 动 腿 标 时 ， 
在 标 太 上 能 得 看 到 当前 鼠标 位 置 的 坐标 。 再 次 选择 “ 奉 看 ”/“ 标 矿 ” 命 令 可 以 隐藏 标 矿 。 


在 “人 查看”/“ 标 尺 ” 命 令 的 子 命令 中 ， 还 可 以 根据 设计 需要 设置 标尺 的 原点 位 置 和 单位 。 
2. 网 格 


网 格 是 文档 窗口 中 纵横 交错 的 直线 ， 通 过 网 格 可 以 精确 定位 图 像 对 象 。 

选择 “查看 ”/“ 网 格 ”/“ 显 示 网 格 ” 命 令 ， 即 可 在 文档 编辑 窗口 中 显示 网 格 。 

选择 “但 看 ”/“ 网 格 ”/“ 菲 齐 到 网 格 ” 命 令 ， 在 文档 中 创建 或 移动 对 象 时 ， 丈 会 日 
动 对 齐 距 离 最 近 的 网 格 线 。 

选择 “查看 ”/“ 网 格 ”/“ 网 格 设 置 ” 命 令 ， 在 弹出 的 “网 格 设 置 ” 对 话 框 中 可 以 设 
置 网 格 的 参数 ， 如 颜色 、 间 隔 和 线 型 。 

3. 辅助 线 

使 用 辅助 线 可 以 更 精确 地 排列 图 像 ， 标 记 图 像 中 的 重要 区 域 。 将 鼠标 移 到 标尺 上 ， 按 
住 鼠 标 左 键 并 拖 动 到 文档 中 合适 的 位 置 释放 ， 即 可 添加 辅助 线 ， 如 图 2-23 所 示 。 


内 梦想 能 寻 到 一 个 小 屋 ， 温 志 而 雅致 
vx] norem presa, "RT, RT | 

; "HRAURTBROPUSIH REOR T Er n— kb néb , "3 

, 环 ， 那 是 我 的 心跳 二 为 了 美丽 的 小 屋 。 mm 
UI MCI M T: E 

印 ， 深 深 吸 引 我 ,各 种 各 样 的 美丽 东 林 象 是 野花 般 星 :， 

用 点 点 的 装饰 着 这 片 美丽 的 天 地 p 


Su8HBxHeNIEIS , HERIREDO- HR , RYE |] 
mUTÉOSE Est Pod 


Enter 


图 2-23 ”添加 辅助 线 
将 辅助 线 添 加 到 页 面 上 之 后 ， 用 户 还 可 以 根据 需要 对 辅助 线 进 行 编辑 。 利 用 的 编辑 操 
作 人 简要 介绍 如 下 : 
(1) 移动 辅助 线 : 将 鼠标 移 到 辅助 线 上 ， 当 鼠标 指针 变 成 双 箭 头 时 拖 动 辅助 线 ， 即 
可 改变 辅助 线 的 位 置 。 如 条 要 将 辅助 线 精确 定位 ， 可 以 双击 辅助 线 ， 在 弹出 的 对 话 框 中 输 
入 辅助 线 的 具体 位 置 ， 即 可 将 该 辅助 线 移 到 指定 的 位 置 。 
(2) 锁定 辅助 线 : 选择 “ 答 看 ”/“ 辅 助 线 ”/“ 锁 定 辅助 线 ” 命 令 即 可 锁定 辅助 线 ， 
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锁定 后 的 辅助 线 不 能 被 移动 。 再 次 选中 该 命令 ， 即 可 解除 对 辅助 线 的 锁定 。 

(30 删除 辅助 线 : 将 鼠标 移 到 辅助 线 上 ， 人 然后 按 下 鼠标 还 键 将 其 拖 动 到 文档 范围 乙 
外 即 可 。 

(4) 显示 /隐藏 辅助 线 : 选择 “ 奋 看 ”/“ 辅 助 线 ”/ “显示 辅助 线 ” 命 令 即 可 。 

(50 对 齐 辅助 线 : 选择 “ 答 看 ”/“ 辅 助 线 ”/“ 对 齐 辅助 线 ” 命 令 。 在 文档 中 创建 


或 移动 对 象 时 ， 丈 会 目 动 对 章 距离 最 近 的 辅助 线 。 
(60 编辑 辅助 线 : 选择 “ 合 看 ”/“ 辅 助 线 ”/“ 编 辑 辅 助 线 ” 命 仿 ， 在 弹出 的 “ 辅 
助 线 ” 对 话 框 中 可 以 设置 辅助 线 的 各 项 参数 ， 包 括 辅 助 线 的 颜色 等 。 


Dreamweaver 的 文件 操作 可 以 看 作 是 制作 网 页 的 基本 操作 ， 它 包括 新 建文 件 、 打 开 文 
件 、 导 入 文件 、 保 人 存 和 关 财 文件 、 设 置 文档 属性 等 。 


[jo. 3. 1 新 建 、 打 开 文 档 


创建 独 的 网 页 文件 ， 有 以 下 两 种 方法 : 
(1) 执行 “文件 ”/“ 新 建 ” 命 令 ， 在 弹出 的 如 图 2-24 所 示 的 “新 建文 档 ” 对 话 框 中 ， 
选择 想 要 创建 文件 的 类 型 和 布局 ， 然 后 蛙 击 “创建 ”按钮 ， 即 可 创建 新 文件 。 
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图 2-24 “新建 文档 ”对 话 框 


Dreamweaver CS5 更 新 并 简化 了 CSS 起 始 布 局 ， 使 用 16 种 预定 义 的 页 面 布局 和 代码 模 
板 ， 可 以 快速 地 创建 出 专业 的 页 面 。 此 外 ， 用 户 还 可 以 创建 自己 的 CSS 布局 ， 并 将 它们 
添加 到 配置 文件 夹 中 。 

(2) 如 果 要 基于 模板 创建 文档 ， 则 先 在 “新 建文 档 ” 对 话 框 中 单 击 “模板 中 的 页 ” 
标签 ， 切换 到 如 图 2-25 所 示 的 对 话 框 。 在 该 对 话 框 中 单 击 选择 模板 的 站 点 ， 然 后 再 选择 需 
要 的 模板 文件 。 这 时 可 以 通过 预览 区 域 浏 览 所 选择 模板 的 样式 ， 看 是 人 否 符 合 目 己 的 要 求 。 
选择 需要 使 用 的 模板 后 ， 单 击 “ 创 建 ” 按钮 ， 即 可 基于 选 定 的 模板 创建 一 个 新 文档 。 

如 果 要 编辑 一 个 网 页 文件 ， 必 须 先 打开 该 文件 。Dreamweaver CS5 可 以 打开 多 种 格式 


的 文件 ， 如 htm、html、shtml、asp、jsp、php、js、aspx、dwt、xml、1bi、as、css 等 。 
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打开 网 页 文件 可 以 分 为 两 种 : 

(1) 直接 打开 文件 ， 选择 “文件 ”/“ 打 开 ” 命 令 ， 弹 出 “打开 ”对 话 框 。 用 户 在 文 
件 名 框 中 选择 需要 打开 的 文件 ， 并 单 击 “ 打 开 ” 按 钮 ， 即 可 打开 该 文件 。 用 户 也 可 在 对 话 
框 中 双击 所 需 文件 来 打开 。 
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图 2-25 — 'UgnEE SCRI" OG IRURE 


al Dreamweaver CS5 还 没有 局 动 ， 可 以 右 击 要 打开 的 文件 ， 在 弹出 的 来 单 中 执行 “使 
用 Dreamweaver CS5 编 辑 ” 命 令 来 打开 文件 。 
(2) 在 框 染 中 打开 文件 : 如 下 已 打开 框 染 集 文件 ， 要 在 框架 集中 某 一 个 框 染 打开 文 
件 ， 可 以 先 把 光标 定位 在 需要 打开 文件 的 框架 内 ， 选 择 “ 文 件 ”/“ 在 框架 中 打开 ”命令 ， 
会 打开 “选择 HTML 文 件 ” 对 话 框 。 在 此 方式 下 ， 只 能 打开 以 html 为 扩展 名 的 文件 。 


[jp. 3.2 导入 文件 
在 Dreamweaver CS5 中 ， 可 以 直接 导入 XML 文件 、 表 格式 数据 、Word 文 要 和 Excel 文 档 。 
执行 “文件 ”/“ 导 入 ”命令 下 的 子 命令 ， 然 后 找到 需要 导入 的 文件 ， 单 击 “ 打 开 ?” 
命令 ， 即 可 导入 相应 的 文件 。 


[11.3.3 保存 、 关 闭 文档 


在 Dreamweaver CS5 中 ， 保 存 网 页 文件 的 方法 随 保存 文件 的 目的 不 同 而 不 同 。 

如 果 同 时 打开 了 多 个 网 页 文件 ， 则 执行 “文件 ”/“ 保 存 ” 或 “文件 ”/“ 男 存 为 ” 命 
令 只 保存 当前 编辑 的 页 面 。 

茶 要 保存 打开 的 所 有 页 面 ， 则 须 执 行 “ 文 件 ”/“ 保 存 全 部 ”命令 。 

若是 第 一 次 保存 该 文件 ， 则 执行 “文件 ”/“ 保 存 ” 命 令 会 弹出 “另存 为 ”对 话 框 。 
大 文件 已 保存 过 ， 则 执行 “文件 ”/ “保存 ”命令 时 ， 直 接 保存 文件 。 

如 果 和 希望 将 一 个 网 页 文档 以 模板 的 形式 保存 ， 切 换 到 要 保存 的 文档 所 在 的 窗口 ， 执 行 
“文件 ”/ “另存 为 模板 ”命令 ， 则 会 打开 “另存 模板 ”对 话 框 。 

在 该 对 话 框 的 “站 点 ”下 拉 列 表 框 中 选择 一 个 保存 该 模板 文件 的 站 点 ， 然 后 在 “另存 
为 ”后 面 的 文本 框 中 输入 文件 的 名 称 ， 最 后 单 击 “ 保 存 ” 按 钮 完成 文件 的 保存 。 
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提示 : 第 一 次 保存 模板 文件 时 ，Dreamweaver CS5 将 上 自动 为 站 点 创建 Templates 文件 夹 ， 并 把 模板 文件 存 
放 在 Templates 文件 夹 中 。 请 不 要 把 非 檬 板 文件 存放 到 此 文件 夹 中 。 
保存 框架 文件 比较 特殊 ， 其 具体 的 方法 将 在 后 面 的 相关 章节 中 进行 详细 的 介绍 。 


jo. 3.4 设置 文档 属性 


页 面 标题 、 背 景 图 像 和 凑 色 、 文 本 和 链接 颜色 以 及 边 距 是 每 个 Web 文 档 的 基本 属性 。 
一 般 情 况 下 ， 新 建 一 个 网 页 文件 后 ， 其 默认 的 页 面 属性 都 不 符合 设计 需要 。 可 以 通过 设置 
文档 的 页 面 属性 来 和 目 定义 页 面 外 观 。 操 作 步 又 如 下 : 

(1) 在 Dreamweaver 中 打开 要 修改 页 和 耐 属性 的 网 页 文件 。 

(20 选择 “修改 ”/“ 页 面 属性 ”命令 ， 在 弹出 的 如 图 2-26 所 示 的 对 话 框 中 对 页 面 的 
外 观 、 链 接 、 标 题 和 编码 入 跟踪 图 像 进行 设置 。 
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图 2-26 “页 面 属性 ”对 话 框 


(3) 在 “外 观 ” 分 类 中 ， 可 以 设置 页 面 字 人 人体、 大小、 颜色、 背景 颜色 和 疼 像 、 背 景 
图 像 的 填充 方式 和 页 边 距 。 页 边 距 是 指 页 面 文 档 主体 部 分 与 浏览 器 上 、 下 、 左 、 石 边框 的 
距离 。 

如 果 同 时 使 用 背景 独 像 和 背景 颜色 ， 下 载 铭 像 时 会 先 出 现 颜 色 ， 然 后 图 像 禾 盖 颜 色 。 
如 果 硼 景 图 像 包含 任何 透明 像素 ， 则 背景 颜色 会 透 过 背景 图 像 显示 出 来 。 

默认 情况 下 ，Dreamweaver 使 用 CSS 指定 页 面 必 性。 如果 和 希望 使 用 HTML 标签 ， 则 
必须 在 “首选 参数 ”对 话 框 的 “ 利 规 ”类 列 中 取消 对 “使 用 CSS 而 不 是 HTML 标签 ” 选 
项 的 选择 。 如 果 选 择 使 用 HTML 指定 页 面 属性 ， 属 性 面板 仍然 显示 “样式 ”弹出 式 菜 单 ， 
不 过 ,字体 、 大 小 、 颜 色 和 对 齐 方式 控件 将 只 显示 使 用 HTML 标签 的 属性 设置 ， 应 用 于 当 
前 选择 的 CSS 属性 值 将 是 不 可 见 的 ， 且 “大 小 ”弹出 式 菜单 也 将 被 禁用 。 

(4) 在 “链接 ”分 类 中 ， 可 以 定义 链接 的 默认 字体 、 字 体 、 颜 色 ， 以 及 链接 文本 不 
同 状 态 下 的 颜色 、 修 饰 样式 。 

(5) 在 “标题 ”分 类 中 ， 用 户 可 以 定义 标题 字体 ， 并 指定 最 多 6 个 级 别 的 标题 标签 使 
用 的 字体 大 小 和 颜色。 

(6) 在 “标题 /编码 ”分 类 中 ， 用 户 可 以 指定 页 面 在 浏览 器 窗口 或 编辑 软件 窗口 中 显 
示 的 标题 、 所 用 语言 的 文档 编码 类 型 ， 以 及 指定 要 用 于 该 编码 类 型 的 Unicode YuxX. 

CD 在 “跟踪 图 像 ” 分 类 中 ， 用 户 可 以 指定 跟踪 图 像 及 图 像 的 透明 度 。 
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SR ER KI XEDreamweaver— dE7$4H 2HIZIE,  XEWUE OCTO D BJ. EH 
绘图 软件 绘制 的 一 个 想象 中 的 网 页 排版 格局 图 ， 可 以 是 JPEG、GIF 或 PNG 图 像 ， 从 而 可 
以 使 用 户 非 常 方便 地 定位 文字 、 图 像 、 表 格 、 层 等 网 页 元 素 在 页 面 中 的 位 置 。 

跟踪 图 像 仅 在 Dreamweaver 中 可 见 ， 也 就 是 说 ,使 用 了 跟踪 图 像 的 网 页 在 用 
Dreamweaver 编 辑 时 不 会 再 显示 背景 图 案 ， 但 当 使 用 浏览 器 浏览 页 面 时 ， 则 显示 背 景 图 案 ， 
而 跟踪 图 像 不 可 见 。 

(8) 设置 完毕 后 ， 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 所 做 设置 将 应 用 于 当前 文档 。 
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网 站 的 构建 与 管理 


Dreamweaver CS 不 仅 提供 网 页 编辑 特性 ， 而 且 带 有 
强大 的 站 点 管理 功能 . 用户 可 以 首先 在 本 地 计算 机 的 磁盘 
上 创建 本 地 站 点 ， 从 全 局 上 控制 站 点 结构 ,管理 站 点 中 的 
各 种 文档 ,进行 文档 资源 和 链接 等 路 径 的 正确 设置 ,然后 
上 传 到 服务 器 ， 供 网 民 浏 览 。 


0000 


站 点 相关 术语 

构建 本 地 站 点 

管理 本 地 站 点 和 站 点 文 件 

测试 站 点 

站 扣发 布 

实例 制作 之 将 已 有 文件 组 织 为 站 点 


网 站 的 构建 与 管理 vb 3t 


3.1 站 点 相关 术语 


LE ]s. 1.1 Internet 服 务 器 和 本 地 计算 机 


Internet 服 务 器 是 网 络 上 一 种 为 客户 问 计 算 机 提供 各 种 Internet 服 务 (包括 WWW、FTP、 
e-mail 等 ) 的 高 性 能 计算 机 ， 它 在 网 络 操作 系统 的 控制 下 ， 将 与 其 相连 的 硬盘、 人 磁带、 打 
印 机 、Modem 及 各 种 专用 通信 设备 提供 给 网 络 上 的 客户 站 点 共享 ， 也 能 为 网 络 用 户 提 供 集 
中 计算 、 信 息 发 表 及 数据 管理 等 服务 。 它 的 高 性 能 主要 体现 在 高 速度 的 运算 能 力 、 长 时 间 
的 可 靠 运 行 、 强 大 的 外 部 数据 吞吐 能 力 等 方面 。 

一 般 来 说 ， 网 民 访 问 网 站 其 实 束 是 访问 服务 器 里 的 资料 。 对 于 WWW 浏 览 服务 来 说 ， 
Internet 服 务 器 主要 用 于 存储 网 民 所 浏览 的 Web 站 点 和 页 面 。 网 民 在 浏览 网 页 时 ， 不 需要 
了 解 它 的 实际 位 置 ， 只 需要 在 地 址 栏 输入 网 址 ， 按 下 回 车 ， 就 可 以 轻松 浏览 网 页 。 

对 于 浏览 网 页 的 用 户 来 说 ， 他 们 所 使 用 的 计算 机 被 称 作 本 地 计算 机 。 本 地 计算 机 也 可 
能 做 服务 器 ， 只 不 过 可 能 没有 专业 的 服务 器 好 ， 比 如 说 访问 量 过 大 可 能 束 会 出 现 次 痪 等 状 
况 。 

本 地 计算 机 和 Tnternet 服 务 器 之 间 通 过 各 种 线路 (如 电话 线 、ADSL、ISDN 或 其 他 统 线 
等 ) 进行 连接 ， 以 实现 相互 的 通信 ， 在 连接 线路 中 ， 可 能 会 通过 各 种 各 样 的 中 间 环 节 。 


[Ll]. 1. ”本 地 站 点 与 远 端 站 点 


在 理解 了 lnternet 服 务 器 和 本 地 计算 机 的 概念 之 后 ， 了 解 远 端 站 点 和 本 地 站 点 束 很 容 
易 了 。 严 格 地 说 ， 站 点 是 一 种 文档 的 磁盘 组 织 形式 ， 它 由 文档 和 文档 所 在 的 文件 夹 组 成 。 
设计 良好 的 网 站 通常 具有 科学 的 结构 ， 利 用 不 同 的 文件 来 ， 将 不 同 的 网 页 内 容 分 门 别 类 地 
保存 。 结 构 民 好 的 网 站 ， 不 仅 便 于 管理 ， 也 便于 更 新 。 

在 Internet 上 浏览 网 页 ， 束 是 用 浏览 右 打 开 和 存储 于 lnternet 服 务 占 上 的 HTML 文 档 及 其 
他 相关 资源 。 基 于 Internet 服 务 占 的 不 可 知 特性 ， 我 们 通常 将 存储 于 Internet 服 务 费 上 的 
站 点 称 作 远 端 站 点 。 

利用 Dreamweaver CS5 可 以 对 位 于 Internet 服 务 右 上 的 站 点 文档 直接 进行 编辑 和 管理 。 
但 这 在 很 多 时 候 非 常 不 便 ， 例 如 网 络 速度 和 网 络 的 不 稳定 性 等 ， 都 会 对 管理 和 编辑 操作 带 
来 影响 。 此 外 ， 直 接 对 位 于 Internet 服 务 器 上 的 文档 和 站 点 进行 操作 ， 必 须 始终 保持 同 
Internet 的 连接 。 

既然 位 于 Internet 服 务 右 上 的 站 点 仍然 是 以 文件 和 文件 夹 作为 基本 要 素 的 做 盘 组 织 
形式 ,那么 ， 能 不 能 首先 在 本 地 计算 机 的 磁 私 上 构建 出 整个 网 站 的 框架 ， 编 辑 相 应 的 文档 ， 
然后 再 将 之 放置 到 Internet 服 务 器 上 呢 ? 答案 是 可 以 的 ， 这 吏 是 本 地 站 点 的 概念 。 

利用 Dreamweaver CS5， 用 户 可 以 在 本 地 计算 机 上 创建 出 站 点 的 框架 ， 从 整体 上 对 站 
点 全 局 进行 把 握 。 站 点 设计 完毕 之 后 ， 再 利用 各 种 上 传 工具 ， 例 如 FTP 程 序 ， 将 本 地 站 点 
上 载 到 Internet 服 务 器 上， 形成 远 闹 站 点 。 
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下 面 以 建立 本 地 站 点 cafe 的 简单 实例 演示 创建 新 站 点 的 具体 步骤 ， 本 例 执行 以 下 步 


(1) 局 动 Dreamweaver CS5， 执 行 “ 站 点 ”/“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ” 
对 话 框 ， 如 图 3-1 所 示 。 如 末 还 没有 创建 任何 站 点 ， 则 列表 框 是 空 的 。 

(2) 蛙 击 “ 狐 建 ” 按 钮 ， 在 弹出 的 下 拉 亲 单 中 选择 “站 点 ”命令 ,或 直接 执行 “站 
点 ”/“ 狐 建站 点 ”命令 ， 弹 出 如 图 3-2 所 示 的 “站 点 设置 ”对 话 框 。 


站 点 设置 对 象 未 命名 站 点 2 


der" aver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Dreamweaver 
i 通常 包含 两 个 部 分 : 可 在 其 中 存储 和 处 理 文 件 的 计算 机 上 的 本 地 文件 
卖 ， 以 及 可 在 其 中 将 相同 文件 发 布 到 web 上 的 服务 器 上 的 远程 文件 支 。 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 来 和 名 称 。 
站 点 名 称 : 
本 地 站 点 广 件 夹 : [下 的 文档 峡 命 名 站 点 zi 一 


已 创建 的 站 点 列表 
图 3-1 “管理 站 点 ”对 话 框 图 3-2 “站 点 设置 ”对 话 框 
(32 输入 站 点 名 字 cafkE 和 本 地 站 点 文件 夹 路 径 ， 然 后 单 击 “保存 ”按钮 ， 即 可 新 建 
一 个 站 点 。 


利用 以 上 步骤 可 以 将 磁盘 上 现 有 的 文档 组 织 成 一 个 站 点 ， 便 于 以 后 统一 管理 。 例 如 ， 
在 计算 机 上 的 E:\café 文 件 夹 下 有 一 个 网 站 的 网 页 ， 可 以 在 “站 点 设置 ”对 话 框 的 “本 地 
站 点 文件 夹 ” 右 侧 的 文本 框 中 键入 E:\café， 从 而 在 本 地 磁盘 上 创建 一 个 名 为 café 的 站 点 。 

从 这 里 也 可 M 的 概念 同文 档 不 同 ， 文 档 可 以 是 已 经 存在 的 ， 但 是 站 点 则 是 新 
创建 的 ， 换 名 话说 ， 站 点 只 是 文档 的 组 织 形式 。 

A Oe es 又: 

(40 单 击 “ 站 点 设置 ”对 话 框 左 侧 的 “高 级 设置 ”分 类 项 ， 然 后 在 其 子玉 单 中 选择 
“本 地 信息 ”， 如 图 3-3 所 示 。 对 话 框 中 各 选项 的 功能 分 别 介 绍 如 下 : 

e “ 默认 图 像 文件 夹 ， 

用 于 设置 本 地 站 点 图 像 文件 的 默认 保存 位 置 

令 “链接 相对 于 ” 

用 于 设置 为 链接 创建 的 文档 路 径 的 类 型 ， 文 档 相 对 路 径 或 根 目 录 相 对 路 径 。 

€ "Web URL" 

用 于 设置 本 站 点 的 地 址 ， 以 便 Dreamweaver CS5 对 文档 中 的 绝对 地 址 进行 校 验 。 

Web URL 由 域名 和 Web 站 点 主 目录 的 任何 一 个 子 目 录 或 虚拟 目录 《而 不 是 文件 名 ) 组 
成 。 如 果 Dreamweaver 应 用 程序 与 Web 服务 器 在 同一 系统 上 运行 ， 则 可 以 使 用 
localhost 作 为 域名 的 占 位 和 从， 将 来 申请 域名 之 后 ， 再 用 正确 的 域名 进行 蕉 换 。 
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9 “区 分 大 小 写 的 链接 检查 ” 
选中 此 项 后 ， 对 站 点 中 的 文件 进行 链接 检查 时 ， 将 检查 链接 的 大 小 写 与 文件 名 的 大 小 
写 是 个 相 匹 配 。 此 选项 用 于 文件 名 区 分 大 小 写 的 UNIX 系统 。 
€ “月 用 缓存” 
创建 本 地 站 点 的 缓存 ， 以 加 快 站 点 中 链接 更 新 的 速度 ， 同 时 在 站 点 地 图 模式 中 ,清晰 
地 反映 当前 站 点 的 结构 。 


站 点 设置 对 龟 Key 2 Ld] ECIIZDNITIDTE f&| 
3 站 点 | 
EU mais [ [s | PERPE M Wab .LmmmIETHE. HoluribD HEB 
- EFA ntemot B J-8 BEER acp) 成 wen qESEP. 
UHNHDET: E E TI DE: icm 
[iss 
| MESE FARNE Draameeaeer BLA EIS. POUDA NERO RE. RE FEE NE ab 肖 
weum[hm ^ 11 111 1] XHB ei Pd NEXT —PDN ^g. s e * 
BREITE XGUNEE. 2 LA Heb LI. Ricexg m | 
ZA | [Sm [T mm mn Wu | 
II EE Di icri id ribule | 
名 - ur fn FT] 
Spy 
D EMUDE fb aia dn dinde Eu rar en 
Peor RA dieser d 
[*] - 
[ 3 7j [ av ]| *^ | [ wh j| [am ][ * j 
xs [n JL Egi 5» M 
图 3-3 ”信息 地 图 3-4 “站 点 设置 ”对 话 框 


如 果 要 创建 动态 网 站 ， 则 还 需要 按 以 下 步 又 指定 远程 服务 器 和 测试 服务 器 。 在 
Dreamweaver CS5 中 ， 用 户 可 以 在 一 个 视图 中 指定 远程 服务 占 和 测试 服务 器 ， rii 
n] PAUL BU PTARAR B a E Doe et vr ed vh. 7) T Ec ED PR d ea ec 2p nT EL IEH] e e RAS d 

(5) 单 击 “ 服 务 器 ” 2S, fEuEIS-ABTZRSIRDGE DEED RS 0 按钮 中 ， 
添加 一 个 新 服务 器 ， 如 图 3-5 所 示 。 

(60 在 “服务 器 名 称 ” 文 本 框 中 ， 指 定 狐 服务 器 的 名 称 。 访 名称 可 以 是 所 选择 的 任 


何 名 称 。 
CD 在 “连接 方法 ”弹出 某 单 中 选择 连接 到 服务 磺 的 方式 ， 如 网 3-6 所 示 。 
"- " 2 一 一 f xz — 
版 本 控制 BS. 2 - 服务 器 名 称 ; 
二 CEI pas wo na xw puma — 7 00 
S rmi: ] mea | [1 ar NN SettingsiHappyDoulMy C] Eg 
titel SFTP 
cp ES 2 Row i WebURL; iY 本 地 网 络 | | 
que ol ,Dy WebDAY 
Spey RIS 
LIES 
web unt; (Tr: 
LET. 3] 
Lum [ wr ]| mm 
- 保存 取消 


图 3-5 “站 点 设置 ”对 话 杠 图 3-6 ”选择 连接 服务 堪 的 方法 


如 果 选 择 “FTP”， 则 要 在 “FTP 地 址 ”文本 框 中 输入 要 将 网 站 文件 上 传 到 其 中 的 FTP 
服务 器 的 地 址 、 连 接 到 FTP 服务 器 的 用 户 名 和 密码 ， 然 后 在 “ 根 目录 ”文本 框 中 输入 远 
程 服务 器 上 用 于 存储 公开 显示 的 文档 的 目录 《文件 夹 ) 。 如 果 仍 需 要 设置 更 多 选项 ， 可 以 
展开 “更 多 选项 ”部 分 ， 如 图 3-7 所 示 。 
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FTP 地 址 是 计算 机 系统 的 完整 Internet 名 称 ， 如 ftp.mindspring. com。 应 输入 完 
整 的 地 址 ， 并 且 不 要 附带 其 他 任何 文本 ， 特 别 是 不 要 在 地 址 前 面 加 上 协议 名 。 如 果 不 知 道 
FTP 地 址 ， 或 不 能 确定 应 输入 哪些 内 容 作 为 根 目录 ， 应 与 服务 器 管理 员 联 系 。 
注意 端口 21 是 接收 FTP 连接 的 默认 端口 。 可 以 通过 编辑 右 侧 的 文本 框 来 更 改 默认 端口 号 。 保 存 设 
置 后 ， FTP 地 址 的 结尾 将 附加 上 一 个 冒号 和 新 的 端口 号 《〈 例 如 ， ftp.mindspring. com:29) 。 

(8) 如 果 选 择 连 接 方式 为 “本 地 /网 络 ”， 则 单 击 “ 服 务 咒 文件 夹 ” 右 侧 的 文件 夹 图 
标 按钮 ， 指 定 存储 站 点 文件 的 文件 夹 所 在 的 路 径 。 

(9) 在 “Web URL” 文 本 框 中 ， 输 入 Web 站 点 的 URL。Dreamweaver 使 用 Web URL 
创建 站 点 根 目 录 相 对 链接 ， 并 在 使 用 链接 检查 器 时 验证 这 些 链 接 。 

(100 单 击 “保存 ”按钮 关闭“ 基本 ”屏幕 。 然 后 在 “服务 器 ”类 别 中 ， 指 定 刚 添加 
或 编辑 的 服务 器 为 远程 服务 器 、 测 试 服务 器 ， 还 是 同时 为 这 两 种 服务 器 ， 如 图 3-8 所 示 。 

在 这 里 ， 需 要 提请 读者 注意 的 是 ， 如 果 本 地 根 文件 夹 位 于 运行 Web 服务 器 的 系统 中 ， 
则 无 需 指定 远程 文件 夹 。 这 意味 着 该 Web 服务 器 正在 您 的 本 地 计算 机 上 运行 。 


服 劳 吕 名称 ; | test Server 
连接 方法 ; | FTP Y 
FTP 地 址 ; | |] mn: 
外 要 
RP: Mm | Esci NAHE von ERImmmeRS m. II snstemim NE 
| Internet 服务 提供 商 (5p) 或 web 管理 只。 
密码 : | | 口 保存 RUERM 
则 试 有 ey HB: REFUSES Dreamweaver 41 d ET FE. QUERENHEIPEN. IP EUER web AY 
: uL s". £482 X—TAGGNESENS. 
根 目录 ; | | xx 
Web URL: | http://127.0.0.1/ TIEN Sf - ; aL Se at 
Cortrbula | test Server C:Documents and Settrng,， RUPES | 
v 更 多 选项 1 
口 使 用 被 动 式 FTP - 
口 使 用 IPve 传输 模式 
口 使 用 以 下 位 置 中 定 久 的 代理 首选 参数 
[VI 使 用 FTP 性 能 忧 化 
如 果 Dreamweaver 无 法 连接 到 您 的 服务 器 则 职 消 选 择 此 选项 。 — 
ut - [78 
口 使 用 其 它 的 FTP 移动 方法 -— 
当 启 用 回 退 时 或 称 动 交 件 时 发 生 错 误 则 选择 此 选项 。 
保存 取消 um LM | 
` Eg sup TIA 一 MEL Im \ 一 工 口 日 H 
图 3-7 设置 浏览 文件 的 地 址 图 3-8 ”询问 是 否 需 要 远程 服务 占 


创建 动态 站 点 的 目的 是 开发 动态 网 页 ，Dreamweaver 还 需要 测试 服务 器 的 服务 以 便 在 
进行 操作 时 生成 和 显示 动态 内 容 。 测 试 服务 磺 可 以 是 本 地 计算 机 、 开 发 服务 右 、 中 间 服 务 
作 或 生产 服务 器 。 接 下 来 的 步 始 设置 测试 服务 器 。 

(11) 在 “站 点 设置 ”对 话 框 的 “服务 右 ”类别 中 蛙 击 “ 洪 加 新 服务 费 ” 按 钮 ， 洪 加 
一 个 新 服务 器 ， 或 选择 一 个 已 有 的 服务 器 ， 然 后 单 击 “ 编 辑 现 有 服务 器 ” 投 钮 。 

(120 在 弹出 的 如 图 3-5 所 示 的 对 话 框 中 根据 需要 指定 “基本 ”选项 ， 然 后 单 击 “ 局 
级 ”按钮 。 如 图 3-9 捷 未 。 
注意 : 指定 测试 服务 器 时 ， 必 须 在 “基本 ”屏幕 中 指定 Web URL. 

(135 在 测试 服务 器 中 ， 选 择 要 用 于 Web 应 用 程序 的 服务 器 模型 ， 如 图 3-10 所 示 。 
提示 : 从 Dreamweaver CS5 开始 ，Dreamweaver 将 不 再 安装 ASP. NET、ASP JavaScript 或 JSP 服务 
器 行为 。 但 Dreamweaver CS5 对 这 些 页 面 仍然 提供 实时 视图 、 代 码 颜 色 和 代码 提示 文 持 ， 且 无 需 在 “站 
点 设置 ” 对 话 框 中 选择 ASP. NET、ASP JavaScript 或 JSP。 

(14) Hub "Qe" TREHIOSBI "ZR" Bi4R. MAJudE " 服务 器 ”类 别 中 ， 指 定 刚 才 
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TE A E HB A i is AH ed a 8 E19] Ht e i 
(150 单 击 对 话 框 中 的 “确定 ”按钮 ， 返 回 “ 站 点 管理 ”对 话 框 。 这 时 对 话 框 里 列 出 
了 刚刚 创建 的 本 地 站 点 。 


| 远程 服务 器 
- 远程 服务 器 » : 
车 维护 同步 信息 
(VI 维护 同步 信息 C 保存 时 自动 将 文件 上 传 到 服务 器 
口 ] 保存 时 自动 将 玄 件 上 传 到 服 劳 器 口 启用 文件 取出 功能 
口 ] 启用 文件 取出 功能 [V S13? 3C PEZ BER LG 
加 打开 文件 之 前 职 出 取出 名 称 ; | | 
EH. 电子 邮件 地 址 ; | | 
电子 邮件 地 址 ; | -测试 服务 器 
msamm[ 77 M 
[ 测试 服务 器 JavaScript 
. 帮助 ASF VBScript 
服务 器 模型 :| "| PENNE ,> 
ASP.NET VB 
ColdFusi 
* JSP 
取消 gre 
图 3-9 ”设置 远程 服务 占 和 测试 服务 器 图 3-10 选择 服务 喜 模 型 


在 Dreamweaver CS5 中 ， 可 以 对 本 地 站 点 进行 多 方面 的 管理 。 利 用 “文件 ”面板 ， 可 
以 对 本 地 站 点 的 文件 和 文件 夹 进行 创建 、 删 除 、 移 动 和 复制 等 操作 。 


[3. 3. 1 管理 站 点 


对 站 点 的 常用 操作 主要 包括 打开 本 地 站 点 、 编 辑 站 点 、 删 除 站 点 以 及 复制 站 点 。 

1. 打开 本 地 站 扣 

COD 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 文 件 管 理 面 板 ， 如 图 3-11 所 示 。 

(2) 单 击 文件 管理 面板 左上 角 的 下 拉 列 表 ， 从 中 选择 需要 的 站 点 ， 如 图 3-12 所 示 ， 
即 可 打开 相应 的 站 点 。 

2. 编辑 站 点 

在 创建 了 站 点 之 后 ， 如 果 对 站 点 的 某 些 定义 不 满意 ， 还 可 以 对 站 点 属性 进行 编辑 。 方 
法 如 下 : 

CI) 执行 “站 点 ”/“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 。 

(20 选择 需要 编辑 的 站 点 ， 单 击 “ 编 辑 ” 按 钮 ， 弹 出 该 站 点 的 “站 点 设置 ”对 话 框 。 

(3) 依照 本 章 上 一 节 中 介绍 的 方法 重新 设置 站 点 的 属性 。 

编辑 站 点 时 弹出 的 对 话 框 和 创建 站 点 时 弹出 的 对 话 框 完全 一 样 ， 在 此 不 再 玩 述 。 

3. 删除 站 点 

如 果 不 再 需要 某 个 本 地 站 点 ， 可 以 将 其 从 站 点 列表 中 删除 ， 删 除 站 点 步 又 如 下 : 

CI) 执行 “站 点 ”/“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 。 

(2) 选择 需要 删除 的 站 点 ， 单 击 “ 删 除 ” 按 钮 ， 弹 出 一 个 对 话 框 ， 提 示 用 户 本 操作 
不 能 通过 执行 “编辑 ”/ “撤消 ”命令 的 办 法 恢复 。 
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(30 单 击 “ 是 ”， 即 可 删除 选中 站 后。 
提示 : 删除 站 点 实际 上 只 是 删除 了 Dreamweaver 同 该 本 地 站 点 之 间 的 关系 。 但 是 实际 的 本 地 站 点 内 容 ， 
包括 文件 来 和 文档 等 ， 仍 然 保 存在 磁 副 相应 的 位 置 上 。 用 户 可 以 重 独 创建 指向 该 位 置 的 新 站 点 。 


« | 
(Qi 个 本 地 项 目 被 选中 , SEDE...) 


图 3-11 文件 管理 面板 图 3-12 ”选择 站 点 


4. 复制 站 点 

有 了 时候 可 能 希望 创建 多 个 结构 相同 或 类 似 的 站 点 ， 如 果 一 个 一 个 地 创建 ， 既 浪费 时 间 
和 精力 ， 而 且 最 终 的 页 面 布 局 也 可 能 不 一 致 。 利 用 站 点 的 复制 特性 则 可 以 轻易 解决 这 个 问 
题 。 首 先 从 一 个 基准 站 点 上 复制 出 多 个 站 点 ， 然 后 再 根据 需要 分 别 对 各 个 站 点 进行 修改 ， 
能 够 极 大 地 提高 工作 效率 。 复 制 站 点 的 步骤 如 下 : 

(1) 执行 “站 点 ”/“ 管 理 站 点 ”命令 ， 弹 出 “管理 站 点 ”对 话 框 。 

(2) 选择 需要 复制 的 站 点 ， 单 击 “ 复 制 ” 按 钮 ， 即 可 将 该 站 点 复制 。 

新 复制 出 的 站 点 名 称 会 出 现在 “管理 站 点 ”对 话 框 的 站 点 列表 中 。 站 点 名 称 采 用 原 站 
点 名 称 后 添加 “复制 ”字样 的 形式 。 若 需要 更 改 默认 的 站 点 名 字 ， 可 以 选中 新 复制 出 的 站 
点 ， 然 后 单 击 “编辑 ”按钮 编辑 站 点 名 字 等 属性 。 


[1]5. 3. 2 使 用 文件 面板 


在 Dreamweaver 中 ， 站 点 和 站 点 文件 的 管理 主要 是 通过 使 用 “文件 ”面板 来 实现 的 。 
借助 “文件 ”面板 还 可 以 访问 站 上 点、 服务器 和 本 地 驱动 器 、 显 示 或 传输 文件 。 

在 “文件 ”面板 中 但 看 站 点 、 文 件 或 文件 夹 时 ， 可 以 更 改 合 看 区 域 的 大 小 ， 还 可 以 展 
开 或 折合 “文件 ”面板 。 当 折 针 “文件 ”面板 时 ， 它 以 文件 列表 的 形式 显示 本 地 站 点 、 远 
程 站 点 、 测 试 服务 器 或 SVN 库 的 内 容 。 在 展开 时 ， 它 会 显示 本 地 站 点 和 远程 站 点 、 测 试 
服务 器 或 SVN 库 中 的 其 中 一 个 。 展 开 的 “文件 ”面板 的 选项 如 图 3-13 所 示 。 


刷新 获取 文件 同步 
测试 服 沉 器 视图 | 取出 文件 
l| | 
显示 : | ebuy " i C |(3:)89 ^ 4 | "全 T 
MED VEsABT | 存储 库 视图 “上传 文 件 折 委 ! 展 开 
站 点 文件 视图 存 回 文件 


图 3-13 展开 的 “文件 ”面板 选项 
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下 面 对 这 些 选项 的 功能 进行 简要 介绍 

€ ”站 点 列表 

在 该 列表 中 可 以 选择 Dreamweaver 站 点 并 显示 该 站 点 中 的 文件 ， 还 可 以 访问 本 地 磁 
熏 二 的 全 部 文件 ， 类 似 于 Windows 的 资源 管理 器 。 

€ X DL 

用 于 连接 到 远程 站 点 或 断 开 与 远程 站 点 的 连接 。 默 认 情 况 下 ， 如 果 Dreamweaver 已 

"Wh 30min 以 上 ， 则 将 断 开 与 远程 站 点 的 连接 ( 仪 限 FTPO 。 帮 要 更 改 时 间 限 制 ， 可 以 在 

“首选 参数 ”/“ 站 点 ”面板 中 进行 设置 。 

€ 刷新 

用 于 刷新 本 地 和 远程 目录 列表 。 如 果 在 “站 点 定义 ”对 话 框 中 没有 选中 “ 目 动 刷 狐 本 
地 文件 列表 ”或 “ 目 动 刷新 远程 文件 列表 ”选项 ， 则 可 以 使 用 此 按钮 手动 刷新 目录 列表 。 

€ ”站 点 文件 视图 

单 击 此 图 标 按钮 之 后 ， 将 在 “文件 ”和 面板 的 窗 格 中 显示 远程 和 本 地 站 点 的 文件 结构 。 
在 “首选 参数 ”/“ 站 点 ”向 板 中 可 以 设置 哪个 视图 在 左 ， 哪 个 视图 在 右 。 

€ ”测试 服务 占 视 图 

显示 测试 服务 器 和 本 地 站 点 的 目录 结构 。 

令 ”存储 库 视 图 

显示 Subversion (SVN) 存储 库 。 

令 ”获取 文件 

用 于 将 选 定 文件 从 远程 站 点 复制 到 本 地 站 点 。 如 果 该 文件 有 本 地 副本 ， 则 将 其 攻 访 。 

如 末 在 “站 点 定义 ”对 话 框 中 已 选中 “局 用 存 回 和 取出 ”选项 ， 则 本 地 副本 为 只 读 ， 
文件 仍 将 留 在 远程 站 点 上 ， 可 供 其 他 小 组 成 员 取 出 。 如 果 已 禁用 “局 用 存 回 和 取出 ”， 则 
文件 副本 将 其 有 读 写 权限 。 

倒 上传 文 件 

将 选 定 的 文件 从 本 地 站 点 复制 到 远程 站 点 。 

如 果 所 上 传 的 文件 在 远程 站 点 上 沿 不 存在 , 并 且 已 在 “站 点 定义 ”对 话 框 中 选中 了 “局 
用 存 回 和 取出 ”选项 ， 则 会 以 “取出 ”状态 将 该 文件 添加 到 远程 站 点 。 如 条 不 布 望 以 取出 
状态 添加 文件 ， 则 单 击 “ 存 回 文 件 ” 按 人 钮 。 

令 ”取出 文件 

用 于 将 文件 的 副本 从 远程 服务 占 传 输 到 本 地 站 点 ， 并 日 在 服务 占 上 将 该 文件 标记 为 取 
出 。 如 果 访 文件 有 本 地 副本 ， 则 将 其 禾 羡 。 

如 果 在 “站 点 定义 ”对 话 框 中 没有 选中 “局 用 存 回 和 取出 ”选项 ， 则 此 选项 不 可 用 。 

€ ii" xt 

用 于 将 本 地 文件 的 副本 传输 到 远程 服务 器 ， 并 且 使 该 文件 可 供 他 人 编辑 。 执 行 该 操作 
之 后 ， 本 地 文件 被 标记 为 只 读 。 

如 末 在 “站 点 定义 ”对 话 框 中 禁用 了 “局 用 存 回 和 取出 ”选项 ， 则 此 选项 不 可 用 。 

€ 同步 

同步 本 地 和 远程 文件 夹 之 间 的 文件 。 

€ 扩展 / 折 闭 按钮 
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展开 或 折 琶 “文件 ”面板 。 


[Lj3. 3. 3 操作 站 点 文件 或 文件 夹 


无 论 是 创建 空白 的 文档 ， 还 是 利用 已 有 的 文档 构建 站 上 操 ， 痢 可 能 会 需要 对 站 扣 中 的 文 
件 夹 或 文件 进行 操作 。 下 面 简要 介绍 利用 “文件 ”面板 对 本 地 站 点 的 文件 夹 和 文件 进行 创 
建 、 删 除 、 移 动 和 复制 等 操作 。 

1. 新 建 /删除 站 扣 文 件 

在 本 地 站 点 中 新 建文 件 或 文件 夹 的 操作 步 又 如 下 : 

(1) 执行 “窗口 ”/ “文件 ”命令 ， 打 开 文 件 管 理 面 板 。 

(2) 单 击 “ 文 件 ” 和 面板 左上 和 角 的 下 拉 列 表 选 择 需 要 新 建文 件 或 文件 夹 的 站 扩 。 

(3) 单 击 “ 文 件 ” 官 理 面 板 右 上 角 的 选项 按钮 ， 选 择 “ 文 件 ”/“ 新 建文 件 ” 或 “新 
建文 件 夹 ”命令 新 建 一 个 文件 或 文件 夹 。 

如 果 要 从 本 地 文件 列表 面板 中 删除 文件 ， 可 以 近 照 如 下 方法 进行 操作 : 

(1) 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 文 件 管 理 面 板 。 

(20 单 击 “文件 ”面板 左上 角 的 下 拉 列 表 选 择 文件 所 在 的 站 后 。 

(3) 选中 要 删除 的 文件 或 文件 夹 。 

(4) 按 Delete 键 ,系统 出 现 一 个 “提示 ”对 话 框 ， 询 问 用 户 是 否 确定 要 删除 文件 或 
XR 

(5) 单 击 “ 是 ”后 ， 即 可 将 文件 或 文件 夹 从 本 地 站 后 中 删除 。 
提示 : 同 删除 站 点 的 操作 不 同 ， 这 种 对 文件 或 文件 夹 的 删除 操作 ， 会 从 磁盘 上 真正 删除 相应 的 文件 或 文 
TES. 

2. 重合 名 站 所 文 件 

(1) 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 文 件 管 理 面 板 。 

(20 单 击 “ 文 件 ” 面 板 堪 上 角 的 下 拉 列 表 选 择 需 要 重 命名 的 文件 或 文件 夹 所 在 的 站 
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(3) 在 文件 列表 中 选中 需要 重 命 名 的 文件 或 文件 夹 ， 然 后 单 击 文件 或 文件 夹 的 名 称 ， 
使 其 名 称 区 域 处 于 可 编辑 状态 。 
(4) 输入 文件 或 文件 夹 的 新 名 称 ， 然 后 单 击 面 板 空 晶 区域 ， 或 按 下 Enter 键 ， 即 可 重 
命名 文件 或 文件 夹 。 
3. 编辑 站 点 文件 
(D 执行 “窗口 ”/“ 文 件 ” 命 令 ， 打 开 “ 文 件 ” 管 理 面 板 。 
(2) 在 “文件 ”管理 面板 左 侧 的 下 拉 列 表 中 选择 需要 编辑 的 文件 所 在 的 站 点 。 
(3) 双击 需要 编辑 的 文件 图 标 ， 即 可 在 Dreamweaver CS5 的 文档 窗口 中 打开 此 文件 ， 
对 文件 进行 编辑 。 
(4) 文件 编辑 完毕 ， 保 和 存 文档 ， 即 可 对 本 地 站 点 中 的 文件 进行 更 狐 。 
一 般 来 说 ， 可 以 首先 构建 整个 站 点 ， 同 时 在 各 个 文件 夹 中 创建 好 需要 编辑 的 文件 ， 然 
后 在 文档 窗口 中 分 别 对 这 些 文件 进行 编辑 ， 最 终 构 建 完整 的 网 站 内 容 。 
4. 移动 /复制 文件 和 文件 夹 
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(3) 如 朱 要 进行 移动 操作 ， 选 择 "A4H^ / "STU]" ESRB. URBE EBBERTE, 
则 执行 “编辑 ”/“ 复 制 ” 沫 单 命令 。 

(4) 选中 目的 文件 来 ， 打 开 “ 编 辑 ”/“ 粘 贴 ” 命 仿 ， 即 可 将 文件 或 文件 夹 移 动 或 复 
制 到 相应 的 文件 夹 中 。 

此 外 ， 使 用 冉 标 拖 动 也 可 以 实现 文件 或 文件 夹 的 移动 操作 。 方 法 如 下 : 

(10 在 “文件 ”面板 的 本 地 站 点 文件 列表 中 选中 要 移动 的 文件 或 文件 夹 。 

(20 按 下 鼠标 堪 键 拖 动 选 中 的 文件 或 文件 夹 ， 然 后 移动 到 目标 文件 严 上 ， 如 图 3-14 
所 示 ， 释 放 鼠 标 。 即 可 将 选中 的 文件 或 文件 夹 移动 到 目标 文件 中 。 

移动 文件 后 ， 由 于 文件 的 位 置 发 生 了 变化 ， 其 中 的 链接 信息 ， 特 别 是 相对 链接 也 应 该 
相应 发 生变 化 。Dreamweaver CS5 会 打开 如 图 3-15 所 示 的 对 话 框 ， 提 示 用 户 是 否 要 更 新 被 
移动 文件 中 的 链接 信息 。 


[I Bal 


& g| 拖 动 文件 到 此 更 新 以 下 文件 的 链接 吗 ? 
FREIE SPESE /musi c/AibfESIIET FRE TT. html 


» 
à )TEXHMHHWET.S([HE.! 


图 3-14 ”移动 文件 /文件 夹 图 3-15 更 新 文件 链接 


单 击 “ 更 痢 文 件 ” 对 话 框 中 的 “更 新 ”按钮 ， 即 可 更 新 文件 中 的 链接 信息 。 
5. 刷新 本 地 站 点 文件 列表 
如 果 在 Dreamweaver CS5 之 外 对 站 点 中 的 文件 夹 或 文件 进行 了 修改 ， 则 需要 对 本 地 站 
点 文件 列表 进行 刷 狐 , 才 可 以 看 到 修改 后 的 结果 。 刷新 本 地 站 点 文件 列表 的 一 般 步 缀 如 下 : 
CD 执行 “ 窒 口 ”/“ 文 件 ” 命 令 ， 打 开 文 件 管理 面板 。 
(2) 单 击 “ 文 件 ” 面 板 左 侧 的 下 拉 列 表 选 择 需 要 刷新 文件 列表 的 站 点 。 
(3) 单 击 文件 面板 上 的 刷新 按钮 名 ， 即 可 对 本 地 站 点 的 文件 列表 进行 刷新 。 


LL]. 3. 4 存储 库 视图 


HDreamweaver CS4 开 始 ， 在 “文件 ”面板 中 已 不 抑 “ 地 图 视图 ”的 踩 影 了 ， 取 而 代 
之 的 是 增加 了 版 本 控制 功能 的 存储 库 视 图 。 

在 本 书 第 一 章 中 我 们 介绍 Dreamweaver CS5 的 新 增 功 能 时 提 到 过 ，Dreamweaver CS5 集 
成 了 一 个 版 本 控制 软件 Subversion， 可 以 提供 更 健壮 的 文件 版 本 控制 、 回 深 ， 等 等 的 取出 
文件 、 存 回 文 件 的 操作 。Dreamweaver 虽然 不 是 一 个 完整 的 SVN 客户 端 ， 却 使 用 户 无 需 
任何 第 三 方 工 具 或 命令 行 界面 ， 束 可 获取 文件 的 最 独 版 本 、 更 改 或 提交 文件 。 
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注意 : Dreamweaver CS5 使 用 Subversion 1.4.5 客户 端 库 。 更 高 版 本 的 Subversion 客户 端 库 不 同 后 
兼容 。 如 果 读 者 更 新 第 三 方 客户 端 应 用 程序 (如 Tortoise SVN) 以 使 用 Subversion 1.5 或 更 高 版 本 ， 
则 Dreamweaver 将 无 法 再 与 Subversion 进行 通信 。 

下 面 简要 介绍 一 下 使 用 存储 库 视 网 时 常用 的 一 些 操作 。 

1. 建立 SVN 连接 

Subversion 是 一 种 版 本 控制 系统 ， 它 使 用 户 组 成 员 能 够 协作 编辑 和 管理 远程 Web fk 
44s LR X TF. rH T Dreamweaver CS5 只 是 集成 了 Subversion 客 户 问 ， 因 此 在 进行 存储 库 
视图 操作 之 前 ， 必 须 建立 与 SVN 服务 器 的 连接 。 

SVN 服务 器 是 一 个 文件 存储 库 ， 可 供 授 权 的 用 户 组 成 员 获 取 和 提交 文件 ， 它 与 
Dreamweaver 中 通常 使 用 的 远程 服务 器 不 同 。 使 用 SVN 时 ， 远 程 服务 器 仍 是 网 页 的 “ 实 
时 ”服务 器 ;SVN 服务 器 用 于 承载 存储 库 ， 存 储 布 望 进行 版 本 控制 的 文件 。 典 型 的 工作 沈 
程 是 : 在 SVN 服务 右 之 则 来 回 获 取 和 提交 文件 ， 然 后 通过 Dreamweaver 发 布 到 远程 服务 
笑 。 远 程 服务 右 的 设置 完全 独立 于 SVN 的 设置 。 


与 SVN 服务 器 的 连接 是 在 “站 点 设置 ” 对 话 框 untere = 
的 “版 本 控制 ”类 别 中 建立 的 。 操 作 步 骤 如 下 : 

(1) 在 “管理 站 点 ”对 话 框 中 选中 需要 设置 存 | 人 eT 
储 库 的 站 点 ， 然 后 单 击 “ 编 辑 ” 按钮 打开 对 应 的 “站 | ee Pia 
点 设置 ”对 话 框 。 


(2) 在 “站 点 设置 ”对 话 框 中 单 击 “高 级 ” 选 
项 卡 ， 然 后 在 对 话 框 左 侧 的 分 类 中 选择 “版 本 控制 ” 


类 别 。 
(3) 在 对 话 框 的 “访问 ”下 拉 有 亲 单 中 选择 CE Co CD 
“Supbversion”， 显 示 如 图 3-16 所 示 的 对 话 框 。 图 3-16 ”设置 版 本 控制 选项 


在 开始 此 设置 之 前 , 必须 获得 对 SVN 服务 器 和 SVN 存储 库 的 访问 权限 有关 SVN 的 
详细 信息 ， 请 访问 Subversion 网 站 ， 网 址 : http://subversion. tigris. org/。 

(4) 在 “协议 ”下 拉 列 表 中 选择 协议 。 可 选 协议 包括 HTTP、HTTPS、SVN 和 SVN+SSH。 
注意 : 使 用 SVN+SSH 协议 要 求 具 备 特 殊 配置 。 有 关 详 细 信 息 ， 请 访问 www. adobe. com/go/learn dw svn. 
ssh cn. 

(5) 在 “服务 器 地 址 ”文本 框 中 输入 SVN 服务 右 的 地 址 。 通 第 形式 为 : 服务 器 名 称 . 
域 . com. 

(6) 在 “存储 库 路 径 ” 文 本 框 中 键入 SVN 服务 占 上 存储 库 的 路 和 任 。 其 形式 通常 类 似 
于 : /svn/your root directory, SVN 存储 库 根 文件 夹 的 命名 由 服务 器 管理 员 确 定 。 

(7) 如 末 和 希望 使 用 的 服务 器 奖 口 不 同 于 默认 服务 器 病 口 ， 则 在 “服务 器 靖 口 ”区 戈 
选择 “ 非 默 认 值 ”， 并 在 文本 框 中 输入 冰 口 号 。 否 则 保留 默认 设置 。 

(8) 在 “用 户 名 ”和 “密码 ”文本 框 中 分 别 输入 SVN HRS SR TIR ARR IS. 

(9) 设置 完毕 之 后 ， 单 击 “ 测 试 ” 按 钮 测试 连接 。 然 后 单 击 “ 确 定 ” 投 钮 关闭 对 话 


框 。 
与 SVN 服 务 占 建 并 连接 后 ， 即 可 在 “文件 ”面板 中 俘 看 SVN 存储 库 。 
2. 获取 最 新 版 本 的 文件 
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从 SVN 存储 库 中 获取 文件 的 最 新 版 本 时 ，Dreamweavet 会 将 该 文件 的 内 容 和 其 相应 
的 本 地 副本 的 内 容 进 行 合 并 。 也 束 是 说 ， 如 果 您 上 次 提交 文件 后 ， 有 其 他 用 户 更 新 了 该 文 
件 ， 这 些 更 新 将 合并 到 您 计算 机 上 的 本 地 版 本 文件 中 。 如 果 本 地 便 盘 上 不 存在 此 文件 ， 
Dreamweaver 会 径直 获取 该 文件 。 
注意 : 首次 从 存储 库 中 获取 文件 时 ， 应 使 用 本 地 空 目 录 ， 或 使 用 所 售 文 件 与 存储 库 中 文件 不 同名 的 本 地 
目录 。 如 果 本 地 张 动 句 包含 的 文件 与 远程 存储 库 中 的 文件 同名 ，Dreamweaver 不 会 在 第 一 次 尝试 时 ， 便 
将 存储 库 文件 钱 入 本 地 张 动 圳 。 

获取 了 最 新 版 本 的 文件 的 具体 步骤 如 下 : 

(1) 建立 与 SVN 服 务 器 的 连接 。 

(20 在 “文件 ”面板 的 视图 下 拉 列 表 中 选择 “本 地 视图 ”。 

(3) 在 文件 列表 中 右键 单 击 所 需 文件 或 文件 夹 ， 然 后 在 弹出 的 快捷 玉 单 中 选择 “版 
本 控制 ”/“ 获 取 最 新 版 本 ”命令 。 

为 获取 最 新 版 本 ， 还 可 以 右键 单 击 文件 ， 然 后 在 上 下 文 染 单 中 选择 “取出 ”命令 ， 或 
者 选择 文件 并 单 击 “ 文 件 ” 面 板 上 的 “取出 ”按钮 。 由 于 SVN 不 文 持 取出 工作 流程 ， 所 以 
此 动作 并 不 是 传统 意义 上 的 实际 取出 文件 。 

3. 提交 文件 

对 网 站 文件 进行 修改 之 后 ， 可 将 其 提交 到 SVN， 步 又 如 下 : 

(1) 与 SVN 服务 器 建立 连接 。 

(2) 在 “文件 ”面板 的 “视图 ”列表 中 选择 “存储 库 视 图 ”。 

(3) 在 文件 列表 中 右键 单 击 要 提交 的 文件 ， 然 后 在 弹出 的 上 下 文采 蛙 中 选择 “ 存 回 ” 
人 ^. 

读者 也 可 以 在 “本 地 视图 ”中 右键 单 击 要 提交 的 文件 ， 然 后 从 弹出 的 上 下 文 菜 单 中 选 
择 “ 存 回 ” 命 令 。 
提示 : 在 “文件 ”面板 的 文件 列表 中 ， 文 件 上 的 绿色 选中 标记 表示 此 文件 有 和 更改， 但 尚未 提 区 到 存储 库 。 

4. 更 新 文件 或 文件 夹 的 SVN 状 态 

获取 或 提交 文件 之 后 ， 读 者 可 以 更 新 单个 文件 或 文件 夹 的 SVN 状态 。 此 更 新 操作 不 会 
刷新 整个 显示 。 操 作 步 又 如 下 : 

(1) 确保 已 成 功 建立 SVN 连接 。 

(20 在 “文件 ”面板 的 “视图 ”下 拉 列 表 中 选择 “存储 库 视 图 ”或 “本 地 视图 ”。 

(3) 在 显示 的 文件 列表 中 右键 单 击 存储 库 或 本 地 文件 中 的 任 一 文件 夹 或 文件 ， 然 后 
从 弹出 的 上 下 文 菜单 中 选择 “更 新 状态 ”。 即 可 更 新 存储 库 或 本 地 文件 、 文 件 夹 的 SVN 状 


太 


5. 锁定 和 解锁 文件 

由 于 存储 库 中 的 文件 可 能 会 在 同一 时 间 被 一 个 或 多 个 小 组 成 员 访 问 或 修改 ， 为 避免 您 
修改 文件 时 ， 其 他 小 组 成 员 访问 该 文件 ， 可 以 锁定 文件 。 通 过 锁定 SVN 存储 库 中 的 文件 ， 
可 以 让 其 他 用 户 知道 有 用 户 正 在 处 理 该 文件 。 此 时 ， 其 他 用 户 仍 可 在 本 地 编辑 文件 ， 但 必 
须 等 到 您 解锁 该 文件 后 ， 才 可 提交 该 文件 。 在 存储 库 中 锁定 文件 时 ， 该 文件 上 将 显示 一 个 
开锁 图 标 ， 而 其 他 用 户 看 到 的 是 完全 锁定 的 图 标 。 

锁定 和 解锁 文件 的 操作 步 又 如 下 : 


全 
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(1) 确保 已 与 SVN 服 务 器 成 功 建 立 连接 。 

(20 在 “文件 ”和 面板 的 “视图 ”下 拉 列 表 中 选择 “存储 库 视 图 ”或 “本 地 视图 ”。 

(3) 在 显示 的 文件 列表 中 右键 单 击 存储 库 或 本 地 文件 中 所 需 的 文件 ， 然 后 从 弹出 的 
上 下 文 染 单 中 选择 “锁定 ”或 “解锁 ”命令 。 

6. 问 存 储 库 添 加 新 文件 

如 果 和 希望 将 一 个 新 文件 添加 到 存储 库 ， 可 以 执行 以 下 操作 : 

CIO 确保 已 成 功 建立 SVN 连接 。 

(20 在 “文件 ”面板 的 文件 列表 中 选择 要 添加 到 存储 库 中 的 文件 ， 然 后 单 击 右键 ， 
从 弹出 的 快捷 末 单 中 选择 “ 存 回 ”命令 。 

(3) 确保 要 提交 的 文件 已 位 于 “提交 ”对 话 框 中 ， 然 后 单 击 “ 确 定 ” 投 钮 。 
提示 : 在 “文件 ”面板 中 ， 文 件 上 的 蓝 色 加 号 表示 SVN 存储 库 中 尚 没有 此 文件 。 

7. 解析 冲突 的 文件 

如 果 您 的 文件 与 服务 如 上 其 他 文件 冲突 ， 可 以 先 编辑 您 的 文件 ， 然 后 将 其 标记 为 已 解 
析 。 例 如 ， 如 果 您 尝试 存 回 的 文件 与 其 他 用 户 的 更 改 有 冲突 ，SVN 将 不 允许 提交 文件 。 此 
时 ， 可 以 从 存储 库 中 获取 该 文件 的 最 狐 版 本 ， 手 动 更 改 工作 副本 ， 然 后 将 您 的 文件 标记 为 
已 解析 ， 这 样 就 可 以 提交 了 。 

解析 冲突 的 文件 的 具体 操作 步骤 如 下 : 

(1) 与 SVN 服 务 器 建立 连接 。 

(20 在 “文件 ”和 面板 的 “视图 ”下 拉 列 表 中 选择 “本 地 视图 ”。 

(3) 在 显示 的 文件 列表 中 右键 单 击 要 解析 的 文件 ， 然 后 从 弹出 的 上 下 文 末 单 中 选择 
“版 本 控制 ”/“ 标 记 为 已 解析 ”命令 。 


3. 4 aAA LAS 


在 将 站 点 上 传 到 服务 占 供 广大 网 民 浏 贤 之 前 ， 建 议 用 户 完 在 本 地 对 网 站 进行 测试 ， 以 
便 尽 早 排 租 网 站 建设 中 可 能 存在 的 问题 。 例 如 ， 应 该 确 你 页 面 在 目标 浏览 磺 中 如 预期 的 那 
样 显 示 和 工作 ， 没 有 断 开 的 链接 ， 页 和 面 下 载 时 间 合 理 等 。 


[Lla. 4.1 管理 网 页 链接 


在 建设 网 站 的 过 程 中 ， 如 有 果 网 站 的 页 面 很 多 ， 则 链接 出 钳 的 可 能 性 会 很 大 。 同 时 ， 由 
于 页 面 的 重 靳 设计 或 组 织 ， 所 链接 的 页 面 很 可 能 已 被 移 动 或 删除 。 如 果 人 力 检 查 网 页 的 链 
接 是 人 否 正常 ， 无 疑 是 一 件 很 及 烦 的 事 ， 而 且 可 能 会 遗漏 一 些 隐 疝 的 链接 。 

有 没有 目 动 检查 链接 错误 的 方法 昵 ? Dreamweaver CS5 提 供 了 一 个 很 好 的 链接 检查 器 ， 
可 以 帮助 用 户 检 查 网 页 链接 ， 不 但 速度 快 而 且 准 确 。 在 友 布 网 站 之 前 先 使 用 Dreamweaver 
CS5 的 链接 检查 右 对 网 站 文件 进行 检查 ， 可 以 检查 单个 页 面 、 一 个 文件 来 、 甚 至 整个 站 点 ， 
技 出 断 开 的 链接 、 错 误 的 代 介 和 未 使 用 的 弧 立 文件 等 ， 以 便 进 行 纠 正和 处 理 。 

1. 检查 断 开 的 链接 

选择 “文件 ”/“ 检 得 页 ”/“ 链 接 ” 人 命令， 可 以 检查 当前 页 面 的 链接 。 
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选择 “站 反 ”/“ 检 醋 站 后 范 围 的 链接 ” 亲 单 命令 ，Dreamweaver 将 目 动 检测 当前 站 后 
中 的 所 有 链接 。 检 得 完 毕 ， “ 结 朱 ”面板 的 “链接 检查 左 ”页 和 面 显 示 检 
便 结 来 ， 如 图 3-17 所 示 。 


结果 搜索 | 参考 | 验证 | 浏览 器 兼容 性 检查 ”链接 检查 器 ”站 点 报告 | FTP 记 录 | 服务 器 调试 


显示 G: | 断 掉 的 链接 cu) (链接 站 件 在 本 地 磁盘 没有 找到 ) 


Dreamweaver 会 在 


udi 断 撞 的 贬 接 n 
o Rc /SRSBÓEPEXC (3)/music/new 100. asp map/ fix. gif 
m imagesz/xiaod. gif 


Rc FSRSBÓEUEXC (3)/music/new 100. asp 
T) ÁSRSBXCUE3XC (3)/music/new 100. asp 
TOG7AEEGUPEXC (3)/music/new 100. asp 
T) /SIER3TPESXO (3)/music/news YxPlay. asp 


= (rn 225 e Ju. vf- ms Di - 
总 共 1659 T, 919 HTML, 1071 "Baz. 


图 3-17 链接 检查 结 来 


map/ fix. gif 


images/xiaod. gif 


image/33. jpg 
总 共 4351 个 链接 ，2626 个 正确 ，1170 个 断 掉 ，555 


如 果 发 现 了 错误 的 链接 ，Dreamweaver 会 在 “链接 检查 器 ”页 面 的 文件 窗 格 中 列 出 链 
接 错 误 所 在 的 页 面 。 双 击 检 测 到 的 一 个 结果 ， 会 自动 打开 相应 的 页 面 ， 并 直接 定位 到 错误 
的 链接 处 ， 修 改 链接 错误 既 快 又 方便 。 

在 “链接 检查 器 ”页 面 ， 用 户 还 可 以 设置 链接 检查 的 范围 ， 并 将 检查 结果 保存 。 单 击 
对 话 框 左 侧 的 绿色 三 角形 按钮 馈 ， 可 以 选择 检测 范围 ， 如 图 3-18 所 示 。 

若 要 保存 检测 结果 ， 可 以 单 击 对 话 框 左 侧 的 保存 按钮 回 . 


i 结果 搜索 | 参考 | 验证 | 浏览 器 兼容 性 检查 ”以 接 检查 器 站 点 报告 FTP 记 录 | 服务 器 调试 
Em): | 断 撞 的 链接 c) 链接 文件 在 本 地 磁盘 没有 找到 ) 


Thrtli st. aspx 
Thrtlist. aspx 


AM mee 断 掉 的 链接 3 
4 往 查 当前 交 档 中 的 链接 (L) - rr - € 
检查 整个 当前 本 地 站 点 的 链接 (E) a, ds4.FieldValue("Musicid", Container) %> 
查 站 点 中 所 选 立 件 的 链接 人 LS3) 


#P 
机 
*D 


LA "NE " 
总 共 1859 ^^, 919 "HIML, 1071 ^ oz. 


图 3- 


2. 检测 无 用 文件 


总 共 4351 个 链接 ，2626 个 正确 ，1170 个 断 掉 ，555 


18 设置 检测 范围 


利用 Dreamweaver CS5 的 链接 检查 功能 ， 用 户 还 可 以 检查 出 站 点 中 无 用 的 文件 并 删除 。 


检测 无 用 文件 的 步 又 如 下 : 


(1) 执行 “站 点 ”/“ 和 检查 站 点 范围 的 链接 ” 沫 单 命 令 。 


显示 ” 


(2) p 


后 面 的 下 拉 列 表 框 中 选择 “ 隐 立 文件 ”选项 。 


所 有 站 点 中 无 用 的 文件 会 列 在 “链接 检查 器 ”页 面 的 文件 窗 格 中 ， 如 图 3-19 所 示 。 


:下 结果 搜索 | 参考 | 验证 | 训 览 器 兼容 性 检查 。 链接 检查 器 ”站 点 报 省 | FTP 记 录 | 服务 器 调试 
(没有 进入 链接 的 文件 ) 


显示 (8): 


LLL 
Le 
—A 


DI RTA OR A 
75/028. gif 
75 /20060925115008T2 
73 /2008092511584014 
T / mmServerScript3 


Tf mnServerScripts/introspect. aspx 


区 
- 在 这 里 选择 


NEL SOUET 


A 
€ 


EN r6 —€ —€ . . fuss rmm moms 
总 共 1859 ^, 919 个 HTWNL ， 1071 "for. 


图 3-1 


总 共 4351 个 链接 ，2626 个 正确 ，1170 个 断 掉 ，555 


9 ”孤立 文件 检查 结果 


将 它们 全 部 选中 ， 按 Delete 键 即 可 删除 。 


3. 显示 外 部 链接 


利用 Dreamweaver CS5 的 链接 检查 器 ， 还 可 以 查看 当前 站 点 中 包含 了 哪些 外 部 链接 ， 
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但 不 会 检查 这 些 链接 是 合 正 确 。 
在 “链接 检查 希 ” 页 面 的 “显示 ”下 拉 列 表 中 选择 “外 部 链接 ”选项 ， 则 对 话 和 框 的 
窗 格 中 将 显示 当前 网 站 中 使 用 的 所 有 外 部 链接 及 相应 的 文件 ， 如 网 3-20 所 未。 


: 了 了 结果 | 参考 | 验证 | 浏览 器 兼容 性 检查 ”链接 检查 器 ”站 点 报 削 FTP 记录 | 服务 器 调试 " 
时 Zr c) (链接 到 站 点 外 的 页 面 ， 不 能 检查 ) 


外 部 链接 n 
dicam a. com/ download 
Ma 、 x. http: //wi om/ download 
TE XX Hi Yu E http://music. £x130. c Rd etus 
€ sp EET htt dowsmedia download 
外 部 链接 ” P /jriniorseli cn lor 
http: € enirn - 


Eu 1658 ^^, 919 ^NINL, 1071 A JÉGLX RE. 总共 4351 4 ERE. 2826 "MIEWB, 1170 ^ dB, S55 


图 3-20 ”查看 外 部 链接 


[3. 4. 2. 配置 浏览 器 


在 Dreamweaver CS5 中 创建 网 页 后 ， 最 好 设置 多 个 不 同 的 主流 浏 览 右 《如 Internet 
Explorer. Netscape Navigator、NetCaptor 等 ) 分 别 对 其 进行 预览 ， 以 查看 不 同 浏 览 器 
用 户 的 浏览 效果 。 

在 Dreamweaver CS5 中 ， 按 F12 键 可 以 在 主 浏览 器 中 预览 网 页 文件 ， 按 Ctr1l+F12 组 合 键 
可 以 在 次 浏览 占 中 预览 网 页 文件 。 通 过 情况 下 ， 只 要 设置 主 浏览 右 和 次 浏 吃 右 即 可 ， 如 果 
需要 ， 可 以 在 “首选 参数 ”对 话 框 中 设置 多 达 20 个 浏览 器 


[3. 4. 3 检查 浏览 器 的 兼容 性 


目前 ， 网 页 浏览 右 的 种 类 其 多 ， 而 应 用 在 网 页 制作 中 的 有 些 技巧 ， 也 并 不 是 所 有 的 浏 
响 器 都 能 文 持 的 。 制 作 的 网 页 上 传 之 后 ， 部 分 网 页 浏览 者 可 能 看 不 到 网 页 实际 的 效果 ， 甚 
至 是 一 团 糟 。 所 以 网 页 设计 者 必须 保证 目 E E t 3 CEPI XU d PIT xc 5) e 

Dreamweaver CS5 自 带 的 网 页 测试 系统 包含 了 一 个 浏览 器 兼容 性 检测 功能 BCC) ， 它 
可 以 帮助 不 论 使 用 何 种 浏览 器 的 用 户 定位 PER IIR om HTML 和 CSS 组 
ka 还 可 测试 文档 中 的 代码 是 否 存 在 目标 浏览 器 不 文 持 的 任何 CSS 属性 或 值 ， 并 生成 报 

， 指 出 各 种 浏览 器 中 与 CSS 相关 的 呈现 问题 。 在 代码 视图 中 ， 这 些 问 题 以 绿色 下 划 线 
来 标记 。 每 隅 一 段 时 间 ， 包 都 会 目 动 更 狐 问 题库 ， 并 根据 此 库 的 信息 对 页 面 进行 检测 ， 并 
Re 已 对 此 问题 作出 修正 。 此 外 ，Dreamweaver CS5 的 预览 加 入 了 默认 的 
Firefox 浏 览 

打开 一 个 网 页 文件 ， 选择 “文件 ”/“ 检 查 页 ”/“ 浏 览 右 莱 容 性 ”有 来 蛙 命令 ， 即 可 在 
打开 的 文件 中 运行 BCC， 并 在 “结果 ”面板 的 “浏览 器 兼容 性 检查 ”页 和 面 中 显示 检测 结 
如 图 3-21 所 示 。 

如 果 检 查 结 果 发 现 有 浏览 右 不 文 持 的 地 方 ， 在 测试 结果 窗口 中 能 够 看 到 是 哪 条 语句 有 
问题 ， 以 及 该 问题 对 哪些 浏览 占有 影响 。 用 户 双 击 测 试 结果 中 的 某 行 ， 即 可 目 动 定位 到 相 
应 的 代码 行 ， 做 相应 的 修改 即 可 。 

默认 情况 下 ，BCC 功能 对 下 列 浏览 器 进行 检查 : Firefox 1.5. Internet Explorer 
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(Windows) 6.0 和 7.0. Internet Explorer (Macintosh? 5. 2. Netscape Navigator 8. 0, 
Opera 8.0 和 9.0 以 及 Safari 2.0. 


UvwÉR 搜索 | 参考 | 驻 证 ”浏览 器 兼容 性 检查 链接 检查 器 | IF - 7-3 | 服务 器 调试 
行 问题 piss 


区. 

O9: 不 支持 的 值 ， “1” i GE 

(G9 不 支持 的 值 : “1” 影响 : Firefox 1. S: Internet Explorer 8.0, 7.0; 

tQ199; 不 支持 的 值 : “1” net Explorer for Mac ntosh 5.2: Netscape 8.0; 
(Ope n 0, 9.0; "Seferi 2.0 

9 | 
在 Adobe. com 上 了 解 更 多 与 浏览 器 中 的 CSS 支持 有 关 的 信息 。 


图 3-21 检查 浏览 器 兼容 性 


网 站 建 好 之 后 ，， 下 一 步 就 是 通过 将 文件 上 传 到 服务 器 来 发 布 该 站 点 。 远 程 文件 夹 是 
存储 文件 的 位 置 ， 这 些 文件 用 于 测试 、 和 生产、 协作 和 发 布 。Dreamweaver 将 此 文件 夹 称 为 
远程 站 点 。 因 此 ， 在 发 布 站 点 之 前 ， 必 须 先 配置 远程 站 点 ， 并 能 够 访问 远程 Web 服务 器 。 


[Lj3. 5. 1 配置 远程 站 点 


(1) 选择 “站 点 ”/“ 管 理 站 点 ”命令 ， 打开 “管理 站 点 ”对 话 框 。 

(2) 选中 需要 上 传 的 站 点 ， 然 后 早 击 “编辑 ”按钮 ， 在 弹出 的 对 话 框 左 侧 的 “分 类 ” 
中 选择 “服务 器 ”项 。 

(350 单 击 “添加 新 服务 器 ”按钮 ， 在 弹出 的 对 话 框 的 “连接 方式 ”下 拉 列 表 中 选择 
连接 到 远程 站 点 的 方式 。 


连接 到 Internet 上 的 服务 右 的 最 常见 方法 是 “FTP”。 如 果 使 用 本 地 计算 机 作为 Web 
服务 右 ， 则 连接 到 本 地 计算 机 的 最 常见 方法 是 “本 地 /网 络 ”。 如 末 不 确定 选择 哪 种 方法 ， 


请 询问 服务 占 的 系统 害 理 员 。 本 例 选择 “本 地 / 网 络 ”， 如 图 3-22 所 示 。 
(4) 切换 到 “ 噩 级 ”页 面 ， 设 置 远程 站 点 文件 的 维护 选项 ， 如 图 3-23 所 未 。 


7 远程 服务 器 


性 维护 同步 信息 
口 ] 保存 时 自动 将 文件 上 传 到 服务 器 
C] 自用 文件 取出 功能 


[V] 打开 文件 之 前 取出 
取出 名 称 : 
电子 邮件 地 址 : 
F 测试 服务 器 
服务 器 模型: 
1 i 
保存 取消 保存 取消 


图 3-22 配置 服务 器 信息 图 3-23 ”配置 服务 器 信息 2 


如 果 希 望 Dreamweaver 自动 同步 本 地 和 远 端 文件 ， 则 选中 “维护 同步 信息 ” 复 选 框 。 
如 果 硕 望 在 保存 文件 时 Dreamweaver. 目 动 将 文件 上 传 到 远程 站 点 ， 则 选中 “保存 时 目 动 
将 文件 上 传 到 服务 器 ” 复 选 枉 。 如 果 和 希望 激活 “ 存 回 /取出 ”系统 ， 则 选中 “局 用 存 回 和 
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取出 ”。 
(5) 单 击 “ 保 存 ” 按 钮 ， 添 加 的 服务 妖 添 加 到 服务 器 列表 中 。 选 中 “远程 ”对 应 的 
复 选 框 ， 如 图 3-24 所 示 。 


| EE BEDEEETAE web 上 的 页 面 的 服务 器， 所 对 话 械 的 设置 志 自 
Internet [E 9938 [E08 (Tap) SE wen dERPÉPR. 


| dE; HUTHET a POLES NALE. EGEUPSEES wub SR 
| A, ERESRE- TIGRE SENT. 


em LIS um — im Mu 
ar EC TIITT Xia vo v 

中 zu 

[ «m ] [| a ][ WwW | 


图 3-24 ”服务 器 列表 
(60 设置 完毕 ， 单 击 “ 保 存 ” 按 钮 关闭 对 话 框 ， 完 成 远程 站 点 的 配置 。 


[J3. 5. 2 上传、 下载 与 同步 更 新 


上 传 和 下 载 是 在 互联 网 上 传输 文件 的 专门 术语 。 一 般 来 说 ， 用 户 把 自己 计算 机 上 的 文 
件 复制 到 远程 计算 机 上 的 过 程 ， 称 为 上 传 ， 相反 ， 用 户 从 某 人 台 远 程 计 算 机 上 复制 文件 到 目 
己 计算 机 上 的 过 程 ， 称 为 下 载 。 

在 正常 的 浏览 过 程 中 ， 用 户 经 常会 进行 上 下 载 操 作 。 在 设置 好 本 地 站 点 信息 和 远程 站 
点 信息 后 ， 束 可 以 进行 本 地 站 点 与 远程 站 点 间 文 件 的 上 传 与 下 载 了 。 

1. 上 传 站 点 文件 

Dreamweaver CS5 内 置 了 强大 的 FTP 功 能 ， 可 以 帮助 用 户 便捷 地 实现 对 站 点 文档 的 上 传 
和 下 载 。 利 用 Dreamweaver 上 传 发 布 网 站 的 共 体 操作 步骤 如 下 : 

(1) 依照 本 章 上 一 节 中 介绍 的 步骤 配置 远程 站 点 之 后 ， 单 击 “ 文 件 ” 面 板 工 具 栏 中 
Hg E 按钮 ， 以 显示 本 地 和 远 端 站 点 ， 如 图 3-25 所 示 。 

(20 将 本 地 计算 机 与 Internet 连 通 后 ， 在 展开 的 “文件 ”面板 中 打开 要 上 传 的 站 点 ， 
并 单 击 “连接 到 远程 主机 ”按钮 缆 ， 将 站 点 与 远程 服务 器 接 通 。 

接 通 后 ，“ 文 件 ” 面 板 的 “ 远 问 站 点 ” 窗 格 中 将 显示 远程 服务 占 中 的 文件 目录 。 

(3) 在 “文件 ”和 面板 的 “本 地 文件 ” 窗 格 中 选择 本 地 文件 来， 将 它们 拖 动 到 “ 远 并 
站 点 ” 窗 格 中 的 某 个 文件 夹 中 。 或 从 “本 地 文件 ” 窗 格 中 选择 文件 ， 然 后 单 击 阐 按 钮 ， 
Dreamweaver CS5 会 将 所 有 站 点 文件 上 传 到 指定 服务 右 的 远程 文件 来。 

本 地 站 点 和 远程 Web 站 点 应 该 具有 完全 相同 的 结构 ， 在 这 两 种 站 点 之 间 传 输 文件 时 ， 
如 果 站 点 中 不 存在 必需 的 文件 来 ， 则 Dreamweaver 将 日 动 创 建 这 些 文件 来 。 如 果 使 用 
Dreamweaver 创 建 本 地 站 点 ， 然 后 将 全 部 内 容 上 传 到 远程 站 点 ， 则 Dreamweaver 能 人 确保 在 远 
程 站 点 中 精确 复制 本 地 结构 。 
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说 明 : 如 果 要 上 传 的 文件 尚未 保存 ， 可 能 会 出 现 一 个 对 话 框 (取决 于 用 户 在 “首选 参数 ”对 话 框 的 “站 
扩 ” 类 列 中 设 年 的 首选 参数 ) ， 提 示 用 户 在 将 文件 上 传 到 远 喘 服务 右 之 前 进行 保存 。 如 果 出 现 对 话 框 ， 
请 里 击 “ 是 ”你 存 该 文件 ， 或 者 单 击 “ 否 ”将 以 前 保存 的 版 本 上 传 到 远 端 服务 器 上 。 
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图 3-25 — hop ASGUURU IU mg 9h ea 


站 点 的 发 布 是 一 个 持续 的 过 程 , 这 一 过 程 的 一 个 重要 部 分 是 定义 并 实现 一 个 版 本 控制 
系统 ， 既 可 以 使 用 Subversion， 也 可 以 使 用 外 部 的 版 本 控制 应 用 程序 。 

2. 下 载 站 点 文件 

(D 在 “ 远 端 站 点 ” 窗 格 中 选择 需要 下 载 的 文件 ， 然 后 将 它们 拖 动 到 “本 地 文件 ” 
窗 格 中 的 某 个 文件 夹 中 。 或 在 “ 远 端 站 点 ” 窗 格 中 选择 文件 ， 然 后 单 击 矶 按钮 ， 即 可 下 载 
文件 。 
(2) 在 “文件 ”面板 中 右键 单 击 要 下 载 的 文件 ， 然 后 从 上 下 文 菜单 中 选择 “获取 ” 
3. 远程 与 本 地 站 点 同步 
上 传 站 点 之 后 ， 可 能 会 因为 网 页 制作 者 的 疏忽 或 多 人 编辑 维护 ， 出 现 本 机 网 页 文件 和 
远程 网 页 文件 不 一 致 的 现象 。 利 用 Dreamweaver 的 站 点 同步 功能 可 以 轻松 修正 这 种 问题 ， 
方便 用 户 进行 站 点 更 新 维护 。 步 又 如 下 : 

COD 执行 “站 点 ”/“ 同 步 站 点 范围 ”菜单 命令 , 打开“ 同步 文件 ”对 话 框 ， 如 图 3-26 


2 


t 


所 示 。 


(20 在 “同步 ”下 拉 列 表 框 中 选择 同步 的 范围 ， 当 前 整个 站 点 或 当前 选中 文件 。 

(30 在“ 方 同 ” 下 拉 列 表 框 中 设置 文件 同步 的 方式 。 

(40 如 来 要 将 本 地 上 没有 的 远程 站 点 上 的 文件 删除 ， 则 选中 “删除 本 地 驱动 副 上 没 
有 的 远 喘 文件 ” 复 选 框 。 

(5) 单 击 “ 预 欠 ” 按 钮 最 示 更 狐 设 置 预 换 对 话 框 ， 如 图 3-27 所 示 。 

(60 如 朱 存 在 需要 更 狐 的 文件 ， 选 中 该 文件 劳 边 的 “上 传 ” 按 钮 ， 然 后 单 击 “确定 ” 
按钮 。 全 此 ， 远 程 与 本 机 文件 的 同步 完成 。 
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上 传 和 下 载 损 作 不 仅 于 此 ， 利 用 其 他 的 一 坚 工 具 ， 例 如 FTP 程 序 等 ， 可 以 直接 将 


Internet 服 务 器 上 的 站 点 结构 及 其 中 的 文档 下 载 到 本 地 计算 机 ， 经 过 修改 ， 又 可 以 利用 相 
应 的 工具 将 修改 后 的 网 页 上 传 到 Internet 服 务 器 上 ， 实 现 对 站 点 的 更 新 。 
Ed c» 
[352582 @ Ee 
方向 四 ) EE Ems T OLD EmUGln m 
E | 帮助 QD ] ey ee re Jdckrh. air 
BER HiEzhss EiROHBUNCSSO PE NL EE i i IB TCI — TERN. UNA A amd. 
SJ |4r] mr] em] 83] 名 | |o Hnim mmn ar 
图 3-26 ”同步 文件 图 3-27 ”同步 预览 


创建 网 站 并 不 是 一 件 一 劳 永 逸 的 事情 ， 与 其 他 媒体 一 样 ， 网 站 也 是 一 个 媒体 ， 同 样 需 
要 经 常 更 新 维护 才 会 起 到 既定 的 商业 效果 。 不 进行 维护 的 网 站 很 快 就 会 因 内 容 陈旧 、 信 息 


过 时 而 无 人 问津 。 因 此 ， 建 好 网 站 之 后 ， 偿 需要 实时 对 网 站 内 容 进行 更 新 。 


在 第 1 草 中 已 对 个 人 网 站 实例 进行 了 仔细 规划 , 收集 、 制 作 了 需要 的 站 点 资源 , 如 L0G0、 
导航 条 育 景 、 商 品 图 请 等 ， 并 建立 了 相应 的 文件 夹 目录 结构 。 本 节 将 这 些 已 有 的 文件 夹 组 
织 为 一 个 站 点 。 步 又 如 下 : 

01. 启动 Dreamweaver CS5， 执 行 “ 站 点 ”/“ 新 建站 点 ”命令 ， 打 开 站 点 定义 对 话 


TEE. 

02 在 “站 点 名 称 ” 后 面 的 对 话 框 中 输入 站 点 名 称 blog。 

03. 单 击 “ 本 地 站 点 文件 夹 ” 右 侧 的 文件 夹 图 标 , 浏览 到 c:\inetpub\wwwroot\blog\ 
目录 ; 或 直接 输入 c:\inetpub\wwwroot\blog\。 
注意 : 本 实例 中 用 到 的 文件 路 径 \inetpub\wwwroot\ 是 在 本 地 计算 机 系统 中 成 功 安 并 IIS 服务 器 之 后 目 动 
生成 的 文件 夹 ， 是 Web 站 点 默认 的 主 目录 。 建 议 读 者 在 创建 站 点 时 ， 最 好 将 本 地 站 点 文件 夹 放置 在 主 目 
录 之 下 ， 或 将 本 地 站 点 文件 夹 定义 为 Web 服务 器 中 的 虚拟 目录 。 有 关 主 目录 和 虚拟 目录 的 介绍 ， 读 者 可 
以 参阅 本 书 第 13 章 13. 3 节 的 介绍 ， 或 相关 书籍 。 

04 9 同 理 ， 设 置 “ 上 默认 图 像 文件 来” 的 路 人 径 为 c:\inetpub\wwwroot\blog\images\。 

05 肯 在 “链接 相对 于 ” 栏 ， 选 择 “ 文 档 ” 选 项 。 

06 在 “Web URL” 碳 侧 的 文本 框 中 输入 http://Localhost。 

如 果 制 作 静 态 站 点 ， 到 这 一 步 束 完成 了 。 由 于 本 实例 中 需要 制作 动态 页 面 ， 因 此 还 需 
要 设置 测试 服务 右 。 

0799 单 击 “ 站 点 设置 ”对 话 框 左 侧 的 “分 类 ”列表 中 的 “服务 器 ”， 切 换 a 到 对 应 的 
对 话 框 。 单 击 “ 添 加 服务 右 ” 按 钮 ， 依 照 本 章 3. 5. 1 和 所 述 步 又 添加 一 个 远程 服务 匿 ， 访 
问 方式 为 “本 地 /了 网络”。 

08 切换 到 “局 级 ”页 面 ， 在 “服务 占 模 型 ”下 拉 列 表 中 选择 “ASP VBScript”。 

09. 单 击 “保存 ”按钮 ， 然 后 单 击 “人 确定 ”按钮 ， 即 可 将 指定 文件 夹 定 义 为 站 点 。 

将 文件 夹 目录 结构 组 织 为 站 点 后 ， 即 可 以 将 磁盘 上 现 有 的 文档 组 织 当 作 本 地 站 点 来 打 
开 ， 便 于 以 后 统一 管理 。 
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所 谓 图 文 并 茂 ， 相 得 益 朝 ,文字 和 图 片 具 有 一 种 相互 
补充 的 视觉 关系 ， 页 面 上 文字 太 多 ， 就 显得 沉闷 ， 缺 乏 生 
^u 页 面 上 图 片 太 多 , 缺少 文字 ,势必 会 减少 页 面 的 信息 
容量 。 因 此 ,最 理想 的 效果 是 文字 与 图 片 的 密切 配合 ， 互 
为 衬托 ， 既 能 活跃 页 面 ， 又 使 页 面 有 丰富 的 内 容 。 

本 章 将 介绍 网 页 中 文本 与 图 形 的 相关 操作 .合理 地 在 
网 页 中 运用 这 些 操作 ,可 以 更 生动 直观 、 形 象 地 表现 设计 
主题 ， 增 强 页 面 的 视 沉 效果。 
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在 网 页 中 加 入 文本 
在 网 页 中 应 用 图 像 
e) ”实例 制作 之 插入 日 期 时 间 
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网 页 作为 一 种 传播 信息 的 嫁 体 ， 文 字 是 传递 信息 的 最 重要 的 嫁 介 ， 从 网 页 最 初 的 纯 文 
字 界 面 发 展 至 今 ， 文 字 仍 是 其 他 任何 元 素 无 法 取代 的 重要 构成 。 这 首先 是 因为 文字 信息 符 
合 人 类 的 阅读 习惯 ， 其 次 因为 文子 所 占 存 取 空 间 小 ， 市 省 了 下 载 和 浏览 时 间 。 

在 制作 网 页 的 时 候 ， 文 本 的 创建 与 编辑 占据 了 制作 工作 的 很 大 部 分 内 容 。 能 人 奋 对 各 种 
文本 控制 手段 运用 目 如 ， 是 决定 网 页 设计 是 否 类 观 、 禄 有 创意 及 提 局 工作 效率 的 关键 。 


[Lj4. 1.1 插入 文本 


在 Dreamweaver CS5 中 插入 文本 有 以 下 几 种 方法 ; 

(1) 直接 在 Dreamweaver 的 文档 窗口 光标 所 在 位 置 输入 文本 内 容 。 

(2) 在 其 他 的 应 用 程序 或 文档 中 复制 文本 ， 然 后 切换 回 Dreamweaver 文 档 窗口 ， 将 光 
标 插入 到 要 放置 文本 的 地 方 ， 再 选择 “编辑 ”/“ 精 贴 ” 或 “选择 性 精 贴 ”命令 。 

利用 Dreamweaver CS5 的 粘贴 选项 ， 可 以 保留 所 有 源 格式 设置 ， 也 可 以 只 粘贴 文本 ， 
还 可 以 指定 粘贴 文本 的 方式 。 

(3) 使 用 “文件 ”/“ 叶 入 ”命令 导入 其 他 文档 中 的 文本 ， 如 XML、 表 格式 数据 、word 
文档 和 Excel 文 档 。 

(4) 从 文 持 文本 拖 放 功 能 的 应 用 程序 中 拖 放 文本 到 Dreamweaver CS5 的 文档 窗口 。 


LL. 1. 2 设置 文本 属性 


网 页 中 的 文字 主要 包括 标题 、 信 息 、 文 字 链 接 等 儿 种 主要 形式 。 恨 好 的 文本 格式 ， 能 
够 充分 体现 文档 要 表述 的 意图 ， 激 发 读者 的 阅读 兴趣 。 在 文档 中 构建 丰富 的 字体 、 多 种 的 
段落 格式 以 及 质心 悦目 的 文本 效果 ， 对 于 一 个 专业 的 网 站 来 说 ， 是 必 不 可 少 的 要 求 之 一 。 

文本 的 大 部 分 格式 设置 都 可 以 通过 属性 设置 面板 实现 。 执 行 “ 窗 口 ”/“ 属 性 ”命令 ， 
即 可 打 TESTE LPCHU WC 如 图 4-1 所 示 。 


[Omm] EO 无 v| 5x zorro p D 
Bis css ID) 链接 D vac Biz 


页 面 属性 ... 列表 项 E 


图 4-1 文本 属性 设置 面板 


打开 属性 面板 之 后 ， 单 击 面板 左上 角 的 全 按钮 ， 即 可 设置 HTML 格式 ， 如 网 全 1 所 
示 。 该 属性 设置 面板 中 各 个 选项 的 功能 简要 介绍 如 下 : 

格式 : 设置 所 选 文本 的 段落 样式 。“ 无 ”是 系统 的 默认 设置 ， 从 光标 所 在 行 的 左边 开 
始 输入 文本 ， 没 有 对 应 的 HTML 标识 ; “段落 ”表示 将 文本 内 容 设置 为 一 个 段落 ; “标题 
1” 到 “标题 6” 用 于 设置 不 同 级 别 的 标题 ; “预先 格式 化 的 ”用 于 预定 义 一 个 段落 ， 使 用 
该 格式 ， 可 以 在 文本 中 插入 多 个 空格 ， 从 而 可 以 任意 调整 文本 内 容 的 位 置 。 
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ID: 为 所 选 内 容 分 配 一 个 DD。 如 来 已 声明 过 ID， 则 该 下 拉 列 表 中 将 列 出 文档 的 所 有 
未 使 用 的 已 声明 ID. 

AS: 显示 当前 应 用 于 所 选 文本 的 类 样式 。 

如 果 没 有 对 所 选 内 容 应 用 过 任何 样式 ， 则 弹出 订单 显示 “无 ”。 如 果 已 对 所 选 内 容 
应 用 了 多 个 样式 ， 则 弹出 式 采 单 将 显示 当前 页 面 所 有 使 用 过 的 样式 。 使 用 “样式 ”弹出 亲 
单 可 执行 以 下 操作 : 

1) 选择 “无 ”， 删 除 当前 所 选 样式 。 

2) 选择 要 应 用 于 所 选 内 容 的 样式 。 

3) 选择 “ 重 命名 ”， 可 以 重 命名 当前 选 定 文 本 采用 的 样式 。 

4) 选择 “附加 样式 表 ”， 打 开 一 个 可 以 附加 外 部 样式 表 的 对 话 框 。 

链接 :创建 所 选 文 本 的 超 文 本 链接 。 有 以 下 儿 种 方式 : 

1) 单 击 文件 夹 图 标 浏览 站 点 中 的 文件 ; 

2) 直接 键入 文件 URL; 

3) 将 “ 指 同 文件 ”图 标 党 拖 到 “文件 ”面板 中 需要 的 文件 ; 

4) 将 文件 从 “文件 ”面板 拖 到 “链接 ”文本 框 中。 
: 将 文本 字体 设 症 为 粗 体 。 
: 将 文本 字体 设置 为 料 体 。 
: 选择 需要 建立 列表 的 文本 ， 然 后 单 击 该 按钮 ， 即 可 建立 无 序列 表 。 
: 建立 有 序列 表 。 
: UP X ABE. 
: DCASIR HE e 

bw ApHfRSEBHHBOEODA LH. BfkwUVLdR S. DABUBMÓ SUBIK BEBE LIRE is 
的 提示 文本 。 

“目标 ”: 指定 链接 文件 打开 的 方式 。 

1) blank: 将 链接 文件 加 载 到 一 个 新 的 、 示 命名 的 浏览 此 和 贸 口 。 

2) parent: 将 链接 文件 加 载 到 该 链接 所 在 框 染 的 父 框 染 集 或 父 搞 口中。 如 果 包 含 链 
接 的 框 染 不 是 航 僚 的 ， 则 链接 文件 加 载 到 整个 浏 贤 费 窗口 中 。 

3) self: 将 链接 文件 加 载 到 该 链接 所 在 的 同一 框 染 或 窗口 中 。 此 目标 是 默认 的 ， 
此 通 利 不 需要 指定 它 。 

4) top: 将 链接 文件 加 载 到 整个 浏览 右 窗 口 ， 从 而 删除 所 有 框 染 。 

[页面 属性 ，_j]， 单 击 此 按钮 弹出 “页 面 属性 ”对 话 框 ， 对 页 面 属性 进行 设置 。 

局 过 世上 日 :列表 项 的 属性 设置 窗口 。 将 光标 放置 在 任意 列表 位 置 ， 则 该 按钮 变 为 

可 用 ， 单 击 该 按钮 ， 即 可 打开 列表 属性 设置 窗口 ， 进 行 相 应 的 设置 。 

单 击 属性 面板 左上 角 的 mecs 按钮 ， 即 可 使 用 CSS 规 则 格式 化 文本 ， 如 图 4-2 所 示 。 
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图 4-2 CSS 规则 属性 
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目标 规则 : 显示 当前 选中 文本 已 应 用 的 规则 ， 或 在 CSS 属性 检 醋 器 中 正在 编辑 的 规 
则 。 

用 户 也 可 以 使 用 “目标 规则 ”下 拉 瑟 单 中 的 命令 创建 独 的 CSS 规则 、 新 的 内 联 样 陈 
或 将 现 有 类 应 用 于 所 选 文 本 。 

使 用 “目标 规则 ”可 以 执行 以 下 操作 : 

1. 将 插入 点 放 在 已 应 用 CSS 规则 的 文本 块 中 ， 可 以 三 看 文本 块 应 用 的 CSS 规则 。 

2. 从 “目标 规则 ”下 拉 列 表 中 选择 一 个 规则 ， 即 可 应 用 于 当前 选中 的 文本 。 

3. 通过 使 用 CSS 属性 检 柱 器 中 的 各 个 选项 对 已 创建 的 规则 进行 更 改 。 
注意 : 在 创建 CSS 内 联 样式 时 ，Dreamweaver 会 将 样式 属性 代码 直接 添加 到 页 面 的 body 部 分 。 

编辑 规则 : 单 击 该 按钮 可 以 打开 目标 规则 的 “CSS 规则 定义 ”对 话 框 进行 修改 。 

如 末 从 “目标 规则 ”下 拉 列 表 中 选择 了 “新 建 CSS 规则” 选项， 然后 单 击 “编辑 规 
则 ”按钮 ， 则 Dreamweaver 会 打开 “新 建 CSS 规则 定义 ”对 话 框 。 

CSS 和 面板: 单 击 该 按钮 可 以 打开 “CSS 样式 ”和 面板， 并 在 当前 视图 中 显示 目标 规则 
的 属性 。 

“字体 ”: 设置 目标 规则 的 学 体 。 如 采 字 体 列 表 中 没有 需要 的 学 体 ， 可 以 单 击 字 体 下 
拉 列 表 中 的 “编辑 字体 列表 ”项 ， 在 弹出 的 对 话 框 中 设置 需要 的 字体 列表 。 

“大 小 ”: 设置 目标 规则 的 字体 大 小 。Dreamweaver CS5 预 置 了 18 种 学 号 。 

中 ,将 所 选 颜色 设置 为 目标 规则 中 的 字体 颜色 。 
注意 : “学 体 ”、“ 大 小 ”、“ 文 本 颜色 ”、“ 粗 体 ”、“ 和 斜体 ”和 “对 齐 ” 属 性 始终 显示 应 用 于 “ 文 
档 ” 窗 口中 当前 所 选 内 容 的 规则 的 属性 。 在 更 改 其 中 的 任何 属性 时 ， 将 会 影响 目标 规则 。 


[jj4. 1.3 创建 列表 项 


在 编辑 网 页 时 ， 常 党 需要 对 同 级 或 不 同 级 的 多 个 项 目 进 行 编写 或 排列 ， 以 显示 多 个 项 
目 间 的 层次 关系 ， 或 使 文本 布局 更 有 条 理 ， 这 束 需 要 用 到 列表 。 

在 Dreamweaver 中 可 以 从 已 有 的 文本 或 者 从 文档 窗口 中 的 新 文本 创建 项 目 列 表 和 编号 
列表 ， 列 表 还 可 以 被 挫 套 。 项 目 列 表 在 各 个 项 的 前 面 没有 数字 ， 用 不 同 的 符号 及 缩 进 的 多 
少 来 区 分 不 同 的 层次 ; 编写 列表 则 震 要 通过 数学 及 见 进来 区 分 不 同 的 层次 。 

下 和 面 通过 一 个 实例 来 说 明 如 何在 文档 中 创建 列表 。 操 作 步 又 如 下 : 

01 贞 新建 一 个 文档 。 在 文档 窗口 中 输入 需要 列表 的 文本 ， 如 图 4-3 左 边 第 一 栏 所 示 。 

02 和 用 局 标 选 择 除 “ 李 白文 集 ” 以 外 的 其 他 项 内 容 ， 单 击 属性 设置 面板 中 的 旺 按 钮 ， 
则 所 有 项 目的 左边 都 会 加 入 一 个 “@” 符 写 ， 这 样 所 有 项 目 都 被 当 作 无 序列 表 的 第 一 层 。 
如 图 4-3 中 间 的 图 所 示 。 

03 目 选择 “山中 问答 ”、“ 军 行 ” 两 项 ， 单 击 属性 设置 面板 中 的 缩 进 按钮 些 ， 使 它 
们 回 右 缩 进 ， 则 这 两 项 左边 的 “ 鲁 ” 符 号 变 成 了 “OO ”符号 ， 表 示 它 们 在 列表 的 第 二 层 。 
同 理 设 置 其 他 项 ， 最 终 效 果 如 图 4-3 石 边 的 图 所 示 。 

设置 编写 列表 的 方法 与 设置 项 目 列表 的 方法 相似 。 继 续 使 用 上 例 。 

01 用 忌 标 选择 除 “ 李 昌 文集” 以 外 的 其 他 内 容 ， 单 击 属 性 设置 面板 中 的 按钮 旺 |， 
则 所 有 项 目 左边 都 会 加 入 数字 ， 这 样 所 有 项 目 都 被 当 作 无 序列 表 的 第 一 层 ， 如 网 4-4 左 边 
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第 一 栏 所 示 。 


图 4-3 设置 项 目 列表 
02 选择 “山中 问答 ”、“ 军 行 ” 两 项 ， 单 击 属性 设置 面板 中 的 缩 进 按 钮 些 ， 使 它 
们 问 右 缩 进 ， 则 这 两 项 左边 会 按 顺 序 加 入 数字 ， 表 示 它 们 是 列表 的 第 二 层 。 同 理 设置 其 他 
项 ， 如 图 4-4 中 间 的 图 所 示 。 


图 4-4 ”设置 编号 列表 图 4-5 ”编号 列表 、 项 目 列表 混 排 

此 外 ， 还 可 以 将 编号 列表 和 项 目 列表 混 排 。 例 如 ， 在 设置 好 编号 列表 后 ， 如 果 选 择 列 

表 的 第 二 层 ， 如 “山中 间 答 ”、“ 军 行 ” 两 项 ， 单 击 属 性 设置 面板 中 的 项 目 编号 按钮 ， 则 
这 两 项 左边 的 数字 编 亏 会 变 为 项 目 编 喜 ， 如 图 4-5 所 示 。 


Li4. 1.4 插入 日 期 


在 网 页 中 ， 经 常会 看 到 显示 有 日 期 ， 且 日 期 自动 更 新 。Dreamweaver CS5 为 读者 提供 
了 插入 日 期 的 功能 ， 使 用 它 可 以 用 任意 格式 在 文档 中 插入 当前 时 间 ， 同 时 日 期 自动 更 狐 。 
下 面 通过 一 个 条 单 的 例子 演示 在 文档 中 插入 日 期 的 操作 方法 。 

101: 将 插入 点 放 在 文档 中 需要 插入 日 期 的 位 置 ， 即 “ 松 乱 延 年 ” 下 面 。 如 图 4-6 所 示 。 

二 02 切换 到 “插入 ” 栏 中 的 “常用 ”面板 ， 单 击 面板 中 的 日 期 回 按 钮 ， 弹 出 “插入 
日 期 ”对 话 框 ， 如 图 4-7 所 示 。 

03 朋 在 对 话 框 中 选择 星期 、 日 期 、 时 间 的 显示 方式 。 本 例 仅 设 置 日 期 ， 且 日 期 格式 
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为 “1974 年 3 月 7 日 ”。 


- 
MA ELI 5] 
RIS 
日 期 格式 : 一 取消 
03/07/1974 0 ”帮助 
37T7T4 
1974-03-07 
T737T4 LY | 
时 间 格 式 : | [不 要 时 间 ] 
储存 时 自动 更 新 
DITE 
图 4-6 “插入 日 期 前 的 效果 图 4-7 “插入 日 期 ”对 话 框 


提示 : “插入 日 期 ”对 话 框 中 显示 的 日 期 和 时 间 不 是 当前 日 期 ， 也 不 反映 访问 者 在 查看 站 点 时 所 看 到 的 
日 期 /时 间 。 它 们 只 是 说 明 此 信息 的 显示 方式 的 示例 。 

04 月 如 采访 者 布 望 插入 的 日 期 在 每 次 保存 文档 时 目 动 进行 更 新 ， 可 以 选择 对 话 框 中 
的 “储存 时 目 动 更 新 ” 复 选 枉 。 本 例 也 选择 此 项 。 

05 9 单 击 “人 确定 ”按钮 ， 此 时 就 在 文档 中 插入 了 当前 的 日 期 。 如 图 4-8 所 示 。 

06 选中 插入 的 日 期 ， 在 属性 面板 中 调整 日 期 显示 的 字体 、 大 小 和 对 齐 方式 ， 最 终 
的 效果 如 图 4-9 所 示 。 


2010 年 11 月 10 日 20105E-11H 10H 


图 4-8 插入 日 期 后 的 效果 图 4-9 最终 效果 


[ji4. 1.5 插入 特殊 字符 


本 节 所 说 的 特殊 字符 是 指 在 键盘 上 不 能 直接 输入 的 字符 。 一 般 来 说 ， 在 HTML 中 ， 一 个 
特殊 字符 有 两 种 表达 方式 ， 一 种 称 作 数字 参考 ， 另 一 种 称 作 实体 参考 。 

所 谓 数 字 参 考 ， 束 是 用 数字 来 表示 文档 中 的 特殊 字符 ， 通 常 由 前 级 “&#” 加 上 数值 ， 
再 加 上 后 约 “;” 组 成 ， 其 表达 方式 为 : &#D;， 其 中 D 是 一 个 十 进 制 数 值 。 

所 谓 实体 参考 ， 实 际 上 整 是 用 有 意义 的 名 称 来 表示 特殊 字符 ， 通 常 由 前 级 “&” 加 上 
学 和 从 对 应 的 名 称 ， 再 加 上 后 级 “;” 组 成 。 其 表达 方式 为 : &name; ， 其 中 name 是 一 个 用 于 
表示 字符 的 名 称 ， 且 区 分 大 小 写 。 

fnün, up ELE H] ^&8169" fI "&copy; " 2EXzR OUS S ^0"; HIA &8174; " fl "&reg; " 
来 表示 注册 商标 符号 “@”。 很 显然 ， 这 比 数字 要 容易 记忆 得 多 。 不 过 ， 并 非 所 有 的 浏览 
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器 都 能 够 正确 识别 采用 实体 参考 方式 的 特殊 字符 ， 但 是 它们 都 能 够 识别 出 采用 数字 参考 方 
式 的 特殊 字符 。 
对 于 那些 常见 的 特殊 字符 ， 使 用 其 实体 参考 方式 是 安全 的 ， 在 实际 应 用 中 ， 只 要 记 住 
这 些 常 用 特殊 字符 的 实体 参考 就 足够 使 用 了 。 对 于 一 些 特别 不 常见 的 字符 ， 则 应 该 使 用 数 
字 参 考 方式 。 表 4-1 显 示 了 常用 的 一 些 字 符 实体 参考 和 数字 参考 。 
表 4-1 常见 的 字符 及 其 参考 
字符 实体 参考 字符 实体 参考 | 字符 数字 参 显示 


&nbsp; &2160; 2 &lt; 《 
&copy ; &41169; &gt; 

&reg; &8174; &amp; & 
&trade; &318482; &quot ; * 
&pound; &#163: &times; : x 
&euro; &383064; &plusmn; : 十 
&yen; &4165; &middot 

&cent; &31162; 

&sect; &8167 ; 


SHULYRISSASJERNATA A, (HitfEDreamweaver CS5 中 插入 特殊 字符 却 非常 简单 。 
Dreamweaver 在 “插入 ”面板 的 “文本 ”面板 上 专门 设置 了 常见 的 特殊 字符 按钮 ， 只 需要 
单 击 上 面 的 按钮 ， 即 可 插入 相应 的 特殊 字符 。 

打开 “插入 ”面板 ， 切 换 到 “文本 ”搬入 面板 ， 然 后 单 击 “ 字 符 : 其 他 字符 ”图 标 右 
人 下角 的 下 拉 往 凑 ， 束 可 以 看 到 Dreamweaver 目 市 的 钊 用 特殊 字符 ， 如 网 4-10 所 示 。 


Dy gm. O- À- 


x" «ug sS «".^g wo W*XQ9 «9*0 W4Gg woy Who 


] 单 击 该 图 标 右 下 
d hs JEU T dois 


— 


d gvus 


jv 4 E / T 5 NH 6E) 


— d E 
&* HE 


图 4-10 ”查看 特殊 字符 


如 条 在 下 拉 沫 单 中 没有 找到 需要 的 特殊 字符 ,， 则 单 击 下 拉 沫 单 中 的 “其 他 字符 ”按钮 ， 
打开 “插入 其 他 字符 ”对 话 框 ， 即 可 答 看 其 他 特殊 字符 ， 如 网 4-11 所 未。 

1. 在 网 页 中 插入 特殊 字符 

下 面 通过 插入 两 个 特殊 字符 “8 ”和 “和 ”的 示例 ， 癌 读者 演示 搬入 特殊 子 符 的 其 体 
步 又 。 捅 入 后 的 效 来 如 网 4-12 所 示 。 

(10. 在 文档 中 将 光标 放置 在 需要 插入 特殊 字符 的 位 置 ， 此 时 ， 将 光标 放 在 文字 “和 神 
山 篇 ”的 前 面 。 切 换 到 “搬入 ”/“ 文 本” 面板， 打开 特殊 字符 弹出 染 单 。 单 击 “ 其 他 字 
符 ” 按 钮 加-， 打 开 “ 插 入 其 他 字符 ”对 话 框 。 

(20 在 对 话 框 中 选择 字符 “8$”， 然 后 单 击 “确定 ”按钮 ， 该 符 扎 吏 插 入 到 文本 中 
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I. 

(3) 同 理 ， 选 择 特殊 字符 9， 用 同样 的 方法 将 其 插入 。 

(4) 特殊 字符 和 普通 文本 一 样 ， 也 可 以 使 用 属性 面板 对 其 属性 进行 设置 ， 例 如 设置 
子 体 、 大 小 、 磊 色 、 样 式 每 。 最 终 效 坟 如 图 4-12 所 示 。 

在 文档 中 插入 特殊 子 符 后 ， 特 殊 子 从 在 设计 视图 和 代码 视 图 中 的 显示 是 不 同 的 ， 在 设 
计 视 图 中 显示 的 是 所 输入 的 字符 ， 而 在 代码 视 图 中 显示 的 则 是 特殊 子 符 的 实体 参考 。 


图 4-11 “插入 其 他 子 符 ”对 话 框 


pERT EDEN Mam. GneTXTAWBEBSSCTImEISEBEÉEHPERR. SREVEOWN XT. TEAM 
pleines AA, 


1 IUBE 


插入 的 字符 人 


图 4-12 插入 特殊 字符 效果 


2. 换行 符 

谈 到 特殊 字符 ， 有 必要 介绍 一 下 在 网 页 制作 中 常会 用 到 的 两 个 特殊 字符 : HRTITI SEU 
AERIS FT ehh 

—^POCA Fo PELIS Y SERIA. PriBBGR. Whxe— BU ESE— BJOCAN S — ces D 
下 ， 段 沙 不 能 在 一 行 中 完全 显示 ， 而 是 由 多 行文 字 组 成 。 在 Dreamweaver 中 ， 文 本 共有 目 
动 换 行 功能 ， 但 是 目 动 换行 必须 是 在 文本 一 行 结束 的 时 候 才 能 够 进行 。 在 文档 窗口 中 ， 每 
输入 一 段 文 学 ， 按 下 Enter 键 后 ， 就 目 动 生成 一 个 段 洲 。 按 下 Enter 键 的 操作 通常 被 称 作 便 
回 车 ， 可 以 说 ， 段 落 就 是 带 有 硬 回 车 的 文字 组 合 。 但 是 如 果 要 在 段落 中 实现 强制 换行 的 同 
时 不 改变 段落 的 结构 ， 束 必须 插入 特殊 字符 面板 中 的 换行 符 ， 或 按 下 Shift + Enter 组 合 
键 。 

在 HIML 中 , 段落 换行 对 应 的 标签 是 4p> 和 《</p>, 而 换行 符 的 标签 是 br>。 在 Dreamweaver 
的 文档 窗口 中 ， 每 按 下 一 次 Enter 键 ， 都 会 自动 将 输入 的 段落 包围 在 人 p> 和 《4/p> 标 记 之 中 。 
例如 ， 如 下 的 代码 显示 了 一 段 文字 : 
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实际 上 ， 有 了 时候 可 以 不 使 用 <p> 和 </p>》 标 记 ， 而 是 采用 其 他 类 型 的 标记 来 定义 段落 。 
例如 ， 将 一 行文 字 设 置 为 “标题 1” 格式 ， 实 际 上 是 将 该 行文 字 两 奖 添 加 <h1> 和 </hl> 标 记 ， 
它 一 方面 定义 了 该 行文 学 的 标题 级 别 ， 男 一 方面 也 起 到 定义 该 行文 学 为 一 个 段落 的 作用 。 

使 用 属性 面板 中 的 “格式 ”弹出 闻 单 或 “文本 ”/“ 上 段 沙 格式 ” 子 菜 单 可 以 应 用 标准 
段 洲 和 标题 标签 。 对 段 洲 应 用 标题 标签 时 ，Dreamweaver 目 动 添加 下 一 行文 本 作为 标准 段 
洲 。 夺 要 更 改 此 设置 ， 请 执行 “编辑 ”/“ 首 选 参 数 ” 命 令 ， 然 后 在 “常规 ”类 别 中 的 “ 编 
et 0 i ll i 如 图 4-13 所 示 。 


E 了 
首选 参政 [5] 

2n 常规 
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TH GUB VnSSCBnESNE uo 
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AXÉOPX vm « »&W a» Qa» 
DAN vem — pr "^ [TIT 
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H?. . $8 uio SEQ fH Gate? 
mets9*€2£t$*Q0. so 
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图 4-13 ”参数 设置 对 话 框 


若 要 插入 换行 符 ， 可 以 执行 以 下 操作 之 一 : 
单 击 “ 文 本 ”面板 中 按钮 虽 。 

执行 “插入 ”/“HTML”/“ 特 殊 字符 ”/ 
按 Shift + Enter 组 合 键 。 

在 代码 视图 中 相应 位 置 输入 HTML 标记 <br>。 

在 浏览 器 视图 中 ， 用 插入 换行 符 换 行 和 直接 按 Enter 键 换行 的 区 别 如 图 4-14 所 示 。 


[^ Untitled: S COT aoc 


“换行 符 ” 命 令 


o 


7. Mnlilied-5 LXHTIL)* 
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T3 EJASHEN. ROSXSMARSANE. 

不 他 相信 自己 的 眼睛 ， 革 上 真有 这 么 美国 的 地 方 呈 1 

北 一 定 是 大 师 们 拍 碍 好 ， 我 经 常 这 公告 妓 自 己 。 

得 当 身 边 一 个 及 一 个 GMAT MRNA A 
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WOMUAE BANNER. ti IOCRTE LERRA 37 

那 一 定 是 大 师 站 拍 得 好 ， 我 经 常 这 么 告慰 自己 ， 

浊 当 身 过 一 个 又 一 个 的 朋友 带 着 这 视 的 眼神 从 稻城 回来 时 ， 


: t———————————————————————— ETIIITAXil ARS A 


IRR 有 去 过 位 于 川西 南 甘孜 州 的 稻城 县 ， 


准 道 收 里 就 是 真正 的 传说 中 的 香格里拉” 我 的 心 被 彻底 的 挑动 想来 。 攻 是 怎样 的 一 个 地 方 1 


MA MOERS. 我 终于 怕 上 路 了 | 
| ga NATRII, 去 过 西藏 ， 去 过 青 往 。 mxiodHgW. zubhASL. 
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图 4-14 — ANIRTRATUS SUCEDE, i LES FP EI os 


3. 不 间断 空格 

在 Dreamweaver 中 ， 如 果 使 用 键盘 上 的 Space 键 在 文档 中 添加 空格 ， 会 发 现 只 能 插入 
一 个 空格 ， 即 使 多 次 按 下 Space 键 也 无 济 于 事 ， 同 时 在 代 但 视 儿 中 也 没有 相应 的 HTML 标 签 。 
viii Dreamweaver CS5 只 允许 字符 之 间 包 含 一 个 空格 。 大 要 在 两 个 字符 之 间 添 加 
多 个 空格 ， 必 须 插入 不 间断 空格 。 
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和 藻 要 在 网 页 中 插入 不 间断 空格 ， 请 执行 下 列 操 作 之 一 : 

单 击 “ 文 本 ”面板 中 特殊 字符 下 拉 亲 单 中 的 插入 空格 按钮 中 。 

此 时 会 弹出 一 个 提示 对 话 框 ， 提 示 用 户 特 殊 子 符 可 能 在 某 些 浏览 器 中 无 法 显示 。 硅 选 
中 “以 后 不 再 显示 ” 复 选 枉 ， 则 下 次 插入 非 间 断 空 格 时 不 再 出 现 此 对 话 框 。 

执行 “搬入 ”/“HTML”/“ 特 殊 字 符 ”/“ 不 换行 空格 ”命令 。 

按 Ctrl + Shift + Space 组 合 键 。 

在 代码 视图 中 相应 的 位 置 输入 “&nbsp”。 

在 代码 视图 中 ,采用 以 上 几 种 方式 插入 的 非 间 岂 罕 格 有 其 相应 的 HTML 标 签 “&nbsp”。 

此 外 ， 有 用户 可 以 通过 设置 Dreamweaver CS5 的 首选 参数 ， 从 而 可 以 在 文档 中 添加 连续 
空格 。 执 行 “ 编 辑 ”/“ 首 选 参数 ”命令 ， 然 后 在 “第 规 ”分 类 中 选中 “允许 多 个 连续 的 
空格 ” 复 选 枉 ， 如 图 4-15 所 示 。 
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图 4-15 “首选 参数 ”对 话 框 
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EE Ep virpixémgzuxscL—e. KAUEBJUUIUTISE Ip» Beeimoc-x4m. Uu 
来 了 狐 的 下 观 表现 形式 。 图 像 不 仪 可 以 修饰 网 页 ， 使 网 页 美观 ， 而 旦 与 文本 相 比 ， 一 幅 合 
适 的 图 片 能 够 更 百 观 地 说 明 问 题 ， 使 表达 的 意思 一 目 了 然 。 在 很 多 网 页 中 ， 图 像 占 据 了 重 
要 页 面 ， 有 的 甚 全 是 全 部 页 面 。 

在 Dreamweaver CS5 文 档 中 ， 图 片 不 仪 可 以 直接 放 在 页 面 上 ， 也 可 以 放 在 表格 、 表 单 
以 及 AP 元 素 中 。 在 插入 图 片 之 后 ， 用 户 可 以 直接 对 图 请 做 一 些 修改 ， 例 如 : 为 图 片 添加 链 
按 、 给 图 上 厂 加 上 一 个 边框 、 改 变 图 片 的 尺寸 、 设 定 图 片 对 齐 方式 。 还 可 以 通过 使 用 
Dreamweaver 的 行为 创建 翻转 图 厂 或 图 片 地 图 等 交互 式 图 片 。 


[Lj4. 2.1 网 页 中 可 以 使 用 的 图 像 格式 


图 像 文 件 有 多 种 格式 ， 但 Web 页 面 中 通常 使 用 的 只 有 三 种 ， 即 GIF、JPEG 和 PNG。 各 种 
图 形 文件 格式 介绍 如 下 : 

1. GIF (图 形 交 换 格 式 ) 
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文件 最 多 使 用 256 种 颜色 ， 最 适合 显示 色调 不 连续 或 具有 大 面积 单一 颜色 的 图 像 ， 例 
如 导航 条 、 按 钮 、 网 标 、 徽 标 或 其 他 具有 统一 色彩 和 色调 的 网 像 。 

2. JPEG. 〈 联 合 图 像 专家 组 标准 ) 

该 文件 格式 可 以 包含 数 百 万 种 闫 色 ， 主 要 用 于 摄影 或 连续 色调 图 像 的 融 级 格式 。 随 看 
JPEG 文 件 品质 的 提高 ， 图 片 文件 的 大 小 和 下 载 时 间 也 会 随 之 增加 。 通 音 可 以 通过 压缩 JPEG 
文件 在 网 像 品 质 和 文件 大 小 之 间 达 到 民 好 的 平衡 。 

3. PNG (可 移植 网 络 图 形 ) 

这 种 文件 格式 是 一 种 符 代 GIF 格式 的 无 专利 权限 制 的 格式 ， 它 包括 对 索引 色 、 灰 度 、 
真 彩 色 网 像 以 及 alpha 通 道 透明 的 文 持 。 


[4. 2.2 插入 水 平 线 


在 对 页 面 内 容 分 位 时 ， 利 会 使 用 水 平 线 作为 分 界线 ， 因 此 在 本 书 ， 将 水 平 线 作为 狗 像 
的 一 种 进行 介绍 。 在 Dreamweaver 中 可 以 很 便捷 地 插入 水 平 线 。 例 如 下 面 的 简单 示例 。 
(1) 将 搬入 后 放 在 文档 中 需要 水 平 线 的 位 置 。 例 如 图 4-16 中 ，“ 春 日 ”的 上 方 。 
(2) 单 击 “插入 ”/“HTML”/“ 水 平 线 ”有 琳 单 命令 ， 即 可 在 光标 处 插入 一 条 水 平 线 。 
(3) 在 属性 面板 中 ， 设 首 水 平 线 的 览 度 和 噩 度 。 最 终 效 灯 如 图 4-17 所 示 。 


观 书 有 感 
半 亩 方 塘 一 鉴 开 
Oz Rt B 
| Db rcr pu 
: : 为 有 源头 活水 来 
为 有 源头 活水 来 


| 

春日 
胜 日 寻 芳 泗水 滨 
无 边 光景 一 时 新 
等 用 识 得 春风 面 
BT EARS 


图 4-16 插入 水 平 线 前 的 效 采 图 4-17 插入 水 平 线 后 的 效果 


[4. 2.3 插入 图 像 


在 网 页 中 , 网 像 通 利用 于 添加 岁 形 界面 (例如 导航 按钮 )、 其 有 视觉 感染 力 的 内 容 ( 例 
如 照片 ) 或 交互 式 设计 元 素 〈 例 如 眉 标 经 过 图 像 或 图 像 地 图 )〉。 
在 Dreamweaver 文 件 中 插入 图 片 时 ，Dreamweaver 会 自动 在 网 页 的 HTML 源 代码 中 生成 对 
该 图 像 文 件 的 引用 。 为 了 保证 引用 的 正确 性 ， 访 图 片 文 件 必 须 保存 在 当前 站 点 目录 中 。 如 
果 所 用 的 图 片 不 在 当前 站 点 目录 中 ，Dreamweaver 将 提示 用 户 创 建文 档 相 对 路 径 。 
下 和 而 通过 一 个 在 网 页 中 插入 图 厂 和 文学 的 示例 ， 让 读者 了 解 插 入 图 片 的 其 体 步 又 。 
01. 狐 建 一 个 文档 ， 单 击 “ 设 计 ” 按 钮 切换 到 设计 视图 。 
02 上 执行 “插入 ”/“ 图 像 ” 命 令 ， 或 单 击 “ 常 用 ”面板 上 的 图 按钮 ， 弹 出 “选择 图 
像 源 文件 ”对 话 框 。 
03. 在 “选择 图 像 源 文件 ”对 话 框 中 选择 所 要 插入 图 像 的 路 人 径 ， 或 者 直接 在 URL 中 输 
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入 所 要 插入 图 像 的 路 径 ， 此 时 可 以 看 到 图 像 的 预览 效果 。 

在 该 对 话 框 中 ， 选 中 “文件 系统 ”可 以 选择 一 个 图 形 文件 ， 选 中 “数据 源 ” 可 以 选择 
一 个 动态 图 像 源 。 单 击 “ 站 点 和 服务 器 ”可 以 从 Web 站 点 中 选择 图 像 文 件 。 

04. 选 定 图 像 后 , 单 击 “ 确 定 ” 按 钮 ,如果 选 中 的 图 像 文 件 没有 保存 , 那么 Dreamweaver 
会 弹出 一 个 对 话 框 ， 提 示 用 户 先 保存 文档 。 

05 | 单 击 “人 确定” 按钮。 此 时 将 显示 “图 像 标 签 辅 助 功能 属性 ”对 话 框 ， 在 “ 蔡 代 文 
本 ”和 “详细 摘 述 ”文本 框 中 输入 值 ， 然 后 单 击 “ 确 定 ”。 该 图 像 即 可 插入 文档 中 。 

06 9 在 图 像 的 属性 面板 中 ， 设 置 图 像 的 边框 值 为 2。 

07 在 图 片 下 方 输入 文本 “但 愿 人 长 入 ， 干 里 共 婵 娟 ”， 并 在 属性 面板 中 设置 文本 
字体 、 大 小 和 颜色 。 

08. 选中 文字 和 图 片 ， 单 击 属 性 面板 上 的 居中 按钮 译 。 保 存 文 件 ， 并 用 浏览 器 打开 
文件 ， 即 可 得 到 如 图 4-18 所 示 的 效果 。 


ERAS EAGLE X3 


图 4-18 插入 图 像 与 文本 的 效果 


[4. 2.4 插入 图 像 占 位 符 


图 像 占 位 符 是 在 将 最 终 图 形 添 加 到 Web 页 面 之 前 使 用 的 临时 图 形 。 图 像 占 位 符 不 在 
浏览 器 中 显示 ， 在 对 Web 页 面 进行 布局 时 很 有 用 ， 可 以 帮助 用 户 在 真正 创建 图 像 之 前 确 
定 图 像 在 页 面 上 的 位 置 ， 在 发 布 站 点 之 前 ， 用 做 好 的 图 像 文 件 蔡 换 所 有 的 图 像 占 位 符 

下 面 通过 一 个 简单 实例 演示 在 页 面 中 插入 图 像 占 位 符 的 操作 过 程 。 步 又 如 下 : 

01 9 在 文档 窗口 中 需要 插入 图 像 占 位 符 的 位 置 单 击 女 标 。 例 如 图 4-19 所 示 的 文档 项 


部 。 


02 肯 选择“ 插入”/ “图 像 对 象 ”/“ 图 像 占 位 符 ” 荣 单 命令 ， 或 单 击 名 用 面板 上 图 
图 标 右 侧 的 小 倒 三 角形 , 在 弹出 的 下 拉 采 单 中 选择 氏 图 像 占 位 符 。 弹 出 如 图 4-20 所 示 的 “图 
像 占 位 人 符 ”对 话 框 。 

03 在 “名 称 ” 文 本 框 中 键入 该 图 像 占 位 符 的 名 称 。 本 例 键入 logo_graphic。 

04 在 “宽度 ”文本 框 中 输入 占 位 符 的 宽度 ; 在 “ 癌 度 ”文本 框 中 键入 占 位 和 从 的 局 
度 。 本 例 分 别 设置 为 550 和 60。 

05) 单 击 凑 色 框 ， 并 从 颜色 选择 右 中 选择 一 种 颜色 。 本 例 选 择 采 绿色 (#99FF99) 。 

06. 在 “ 蔡 换 文本 ”文本 框 中 输入 网 像 在 Web 页 面 上 的 文字 描述 。 本 例 刍 入 “logo”。 
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答 换 文本 属于 HTML. 405, 4 WSEXIB E. XETAEXUSSS VTRDUEHROOANIE 
很 重要 的 ， 使 用 屏幕 阅读 器 或 上 只 显示 文本 的 浏览 器 用 户 将 鼠标 移 到 图 像 占 位 符 上 ， 就 可 以 
访问 这 些 图 像 所 供 的 文本 信息 。 


^ OtuERIEB A , XE 高 度 : [56 取消 
站 活水 来 | 颜色 : [| 帮助 D 


| st 
| Ebr. 


图 4-19 ”插入 图 像 占 位 符 前 的 效 来 图 4-20 ” “图像 占 位 从” 对 话 框 


07 睛 单 击 “ 确 定 ” 按 钮 。 即 可 将 图 像 占 位 符 插 入 页 面 指定 的 位 置 。 如 图 4-21 所 示 。 
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观 书 有 感 | 
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| CUT PS ) | | 
| 为 有 源头 活水 来 | | 大 日 | 
À 胜 目 寻 邯 笛 求 ; 
| | Xip*m— Hi 
| 春日 | n cá 
AH HS 
图 4-21 插入 图 像 占 位 符 的 效果 图 4-22 创建 图 像 的 效果 


注意 : 与 在 “设计 ”视图 中 看 到 的 图 像 占 位 符 不 同 ， 在 浏览 占 中 查看 图 像 占 位 符 时 ， 不 会 显示 占 位 符 的 
名 称 和 大 小 ， 而 只 显示 占 位 符 的 蔡 换文 本 。 
插入 图 像 占 位 符 后 ， 用 户 可 以 在 属性 面板 中 修改 占 位 符 的 属性 ， 以 满足 设计 需要 。 如 
果 在 计算 机 上 安装 了 Adobe Fireworks， 还 可 以 根据 Dreamweaver 图 像 占 位 符 创建 新 的 
形 。 下 面 通 过 一 个 简单 示例 演示 创建 新 图 形 的 操作 过 程 。 
01. 继续 上 例 。 在 文档 窗口 选中 图 像 占 位 符 。 
02 肯 在 属性 检查 器 中 单 击 “ 创 建 ” 按 钮 。 
此 时 ， 将 局 动 Fireworks， 并 目 动 独 建 一 个 画布 ， 尺 寸 大 小 与 占 位 符 图 像 相 同 。 
03. 在 画布 中 创建 并 编辑 图 像 。 本 例 选择 “文件 ”/“ 导 入” 命令， 导入 一 幅 透 明 GIF 
图 片 ， 并 符 换 Dreamweaver 中 的 占 位 符 图 像 。 最 终 效 果 如 图 4-22 所 示 。 


[M4. 2.5 设置 图 像 属性 


将 图 像 插 入 文档 之 后 ，Dreamweaver 会 自动 按照 图 像 的 大 小 显示 ， 但 在 实际 设计 中 ， 
往往 需要 对 图 像 的 一 些 属性 进行 调整 ， 如 大 小 、 边 框 、 位 置 、 对 齐 等 。 这 些 操 作 可 以 通过 
如 图 4-23 所 示 的 图 像 属 性 控制 面板 得 以 实现 。 

下 面 简 要 介绍 各 个 属性 参数 的 功能 和 用 法 。 

“ID”: 图 像 名 称 。 在 使 用 Dreamweaver 行为 或 脚本 撰写 语言 (例如 JavaScript 或 
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VBScript〉 时 可 以 利用 该 名 称 引 用 该 图 像 。 
“ 宽 ”、“ 高 ”: 分 别 用 于 设置 图 像 的 宽度 和 高 度 ， 单 位 为 像素 。 


尾 性 


EN$ sk — 0D 7 源 文件 区) J/fantasyS£loatS eif| Qy (7) HD | v| ài ox " 
VI Em 高 加 51 链接 已) Qo 88 Pg. 

H&E] QD 3& EH (0) Ez duy Vn a) NI 55 € À 

|k| LO V2 akaggmE 原始 Qy c XE G0 | 默认 值 m 


14-23 网 像 的 属性 控制 面板 


此 外 ， 还 可 以 直接 通过 鼠标 拖 动 来 改变 图 像 的 大 小 。 方 法 如 下 : 
1) 在 “文档 ”窗口 中 选择 一 个 网 像 。 图 像 的 底部 、 右 侧 及 右 下 角 出 现 调整 手柄 。 
2) 执行 下 列 操作 之 一 ， 调 整 图 像 的 大 小 : 
拖 动 右 侧 的 控制 点 调整 图 像 的 宽度 。 
拖 动 底部 的 控制 点 调整 图 像 的 高 度 。 
拖 动 底 角 的 控制 点 同时 调整 图 像 的 宽度 和 高 度 。 
按 住 Shift 键 的 同时 拖 动 底 角 的 控制 点 ， 可 以 按 比例 缩放 网 像 。 
以 可 视 方 式 最 小 可 以 将 元 素 大 小 调整 到 8X8 像 素 。 若 要 将 元 素 的 宽度 和 高 度 调整 到 更 
小 《例如 1 x 1 像素 ) ， 则 要 在 属性 面板 的 “ 宽 ” 和 “高 ”中 设置 。 
修改 图 像 的 “ 宽 ” 和 “高 ”以 后 ， 该 文本 框 右 侧 将 显示 “ 重 设 大 小 ”按钮 总 ， 若 要 将 
己 调整 大 小 的 元 素 返 回 到 原始 尺寸 ， 可 以 在 属性 检查 器 中 删除 “ 宽 ” 和 “高 ” 域 中 的 值 ， 
或 者 单 击 “ 重 设 大 小 ”按钮 全 。 
“ 源 文件 ”: 用 于 设置 图 像 源 文件 的 名 称 
“链接 ”: 用 于 设置 图 像 链接 的 网 页 文件 的 地 址 。 
CEHRCO : 用 于 设置 图 像 的 说 明 性 内 容 ， 可 以 作为 图 像 的 设计 提示 文本 。 
“类 ”用 于 设置 应 用 到 图 像 的 CSS 样式 的 名 称 
岛 : 启动 在 “外 部 编辑 器 ”首选 参数 中 指定 的 图 像 编辑 器 ， 并 打开 选 定 的 图 像 。 
S. 打开 “图 像 ”预览 对 话 框 ， 并 优化 图 像 。 
如 :用 于 修 前 图片， 删 去 图 片 中 不 需要 的 部 分 。 
dà. 当 图 片 被 调整 大 小 后 此 按钮 可 用 。 用 于 往 调整 大 小 后 的 图 片 里 增加 或 减少 象 素 以 
提高 图 片 质量 。 
外 :用 于 改变 图 片 亮度 和 对 比 度 。 
A. 用 于 改变 图 片 内 部 边缘 对 比 度 。 
HERE: Dreamweaver CS5 的 图 像 编辑 功能 仅 适 用 于 JPEG 和 GIF 图 像 文件 格式 。 其 他 图 像 文件 格式 不 能 
使 用 这 些 图 像 编 辑 功 能 进行 编辑 。 
“地 图 ” 下 面 的 4 个 按钮 : 用 于 制作 映射 图 。 有 关 映 射 图 的 说 明 及 制作 方法 ， 将 在 
本 书 下 一 章 介 2 
"e : 用 于 设置 图 像 的 顶端 到 文档 窗口 顶部 的 距离 。 
“水 平 边 距 ”: 用 于 设置 图 像 的 左边 到 文档 窗口 左边 的 距离 。 
水 平 边 距 属 性 在 图 像 的 左 侧 和 右 侧 添加 边 距 ， 而 垂直 边 距 在 图 像 的 上 方 和 下 方 添 加 边 
距 。 在 下 面 的 例子 中 ， 将 在 图 像 和 文本 之 间 添 加 边 距 。 本 例 执 行 以 下 操作 : 
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01. 新 建 一 个 Dreamweaver 文 档 ， 在 设计 视图 中 插入 图 像 和 文本 ， 并 选中 国 像 。 

021 在 属性 检查 嚣 中， 在“ 水平 边 距 ” 文 本 框 中 输入 30， 然 后 按 Enter 键 设置 水 平 边 
距 。 文 本 和 图 像 之 间 随 即 创 建 一 个 边 距 。 

03 汪 保存 文件 ， 按 下 F12 键 在 浏览 器 中 观察 创建 的 结果 ， 效 果 如 图 4-24 所 示 。 

“原始 ”: 设置 一 幅 显 示 在 该 图 像 前 面 的 代表 图 像 ， 用 于 快速 显示 主 图 像 的 内 容 。 大 
部 分 设计 者 在 该 处 豆 欢 设置 一 幅 与 主 图 像 内 容 一 样 的 黑 晶 图像 或 小 图 像 ， 这 样 用 户 在 浏览 
时 可 以 快速 了 解 图 像 的 信息 。 

“ 边 杠 ”: 用 于 设置 图 像 的 边界 ， 可 以 是 不 为 0 的 整数 ， 或 为 0 隐藏 边框。 

“对 齐 ”: 用 于 设置 图 像 与 文档 中 其 他 对 象 的 对 草 方式 。 

该 属性 项 预 置 了 10 种 对 齐 方式 : 

“默认 值 ”: 浏览 器 默认 对 齐 方式 ， 一 般 为 基线 对 齐 方式 。 

“基线 ”基线 对 齐 方式 ， 指 定 此 行 中 的 文本 基线 与 图 像 的 基线 对 齐 。 

“顶端 ”: 顶端 对 齐 方式 ， 指 定 图 像 与 所 在 行 中 位 置 最 高 的 元 素 对 章 ， 此 元 素 可 以 是 
文本 也 可 以 是 其 他 图 像 。 

“中 间 ”: 中 线 对 齐 方式 ， 指 定 图 像 的 中 线 与 所 在 行 的 文本 基线 对 齐 。 

“底部 ”: 底线 对 齐 方式 ， 指 定 图 像 的 压 线 与 所 在 文本 的 底线 对 齐 。 

“文本 上 方 ”: 文本 上 方 对 草 方式 ， 指 定 图 像 与 此 行文 本 中 的 最 高 字符 对 章 。 

“绝对 中 间 ”: 绝对 中 线 对 齐 方式 ， 指 定 图 像 与 此 行 的 中 线 对 齐 。 

“绝对 底部 ”: 绝对 底线 对 齐 方式 ， 指 定 图 像 与 此 行 的 绝对 底线 对 章 。 

“ 左 对 齐 ”: 指定 图 像 在 页 面 的 左 侧 ， 其 他 元 素 在 页 面 的 右 侧 对 齐 。 

“ 右 对 齐 ”: 指定 图 像 在 页 面 的 右 侧 ， 其 他 元 素 在 页 面 的 左 侧 对 齐 。 

下 面 通 过 一 个 简单 实例 ， 演 示 图 像 对 齐 方式 的 操作 步骤 。 

01 在 页 面 中 插入 图 像 和 文本 ， 然 后 选中 图 像 。 

02. 在 属性 和 面板 的 “边框 ”文本 框 输入 1， 给 图 像 加 上 边框 。 

03 9 在 “对 齐 ” 下 拉 列 表 中 选 “ 左 对 齐 ”。 保 存 文 件 ， 按 下 F12 键 在 浏览 器 中 观察 创 
建 的 结果 ， 效 果 如 图 4-25 所 示 ， 文 本 紧 挨 看 图 像 的 边缘 显示 。 


二 .插入 图 重 与 文本 :htmli(xHIML)* — OO 二 .. 手 入 图 重 与 文本 :htmli(xHIML)* — OO UO 
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图 4-24 图 像 变 水 平 边 距 后 的 效果 Kl4-25 ”图 像 左 对 章 效果 


[ij4. 2.6 设置 外 部 编辑 器 


在 网 页 制作 过 程 中 ， 可 能 第 常 需 要 编辑 网 页 中 的 图 像 ， 以 满足 特定 的 设计 需要 。 使 用 
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Dreamweaver CS5 的 “首选 参数 ”对 话 框 设 定 首 选 图 像 编 辑 器 可 以 提高 整个 工作 过 程 的 效 
率 。 设 置 首选 冬 像 编辑 器 可 以 让 读者 在 使 用 Dreamweaver 的 同时 启用 指定 的 编辑 喜来 修改 
编辑 图 像 。 步 又 如 下 : 

01. 执行 “编辑 ”A“ 使 用 外 部 编辑 器 编辑 ” 采 单 命令 ， 即 可 打开 如 网 4-26 所 示 的 “ 首 
选 参 数 ” 对 话 框 。 


首先 湖区 e 
HX FHRXE/ SN 
ES EN 
| | 外 时 代码 辆 相生 (o FL 
X Eee th) L[IEEN: 
igationes Hl 
Rare ks E) Cr FilesiBasrsnsdiahfFireserks 有 ur | PHIIBR -. 


LI 
spE .EpSE 
LI 


图 4-26 设置 外 部 编辑 器 

02 和 在 “扩展 名 ”列表 中 ， 选 择 要 设置 编辑 器 的 文件 类 型 后 级 名 。 如 果 在 扩展 名 一 
栏 中 没有 发 现 需要 的 后 缀 名， 可 以 单 击 列表 顶部 的 按钮， 然后 在 “扩展 名 ”列表 中 出 现 
的 空位 中 输入 所 宕 的 后 级 即 可 。 

03¢ 单 击 “ 编 辑 器 ”列表 上 方 的 于 按钮， 会 弹出 “选择 外 部 编辑 器 ”对 话 杠 ， 从 中 
浏览 选择 所 知 的 外 部 编辑 右 。 

04 贞 单 击 “ 议 为 主要 ”按钮 ， 可 将 所 选编 辑 器 设置 为 指定 其 型 图 像 的 主要 编辑 髓 。 

进行 上 述 设置 后 ， 在 Dreamweaver 的 文档 窗口 中 选择 需要 编辑 的 图 像 文 件 ， 然 后 单 击 

属性 面板 中 的 “编辑 ”按钮 多 ， 就 可 以 打开 指定 的 编辑 器 对 其 进行 编辑 操作 。 在 编辑 器 中 
修改 图 片 之 后 ， 只 需要 简单 地 单 击 属性 面板 上 的 刷新 图 标 ， 束 可 以 自动 更 新 Dreamweaver 
中 的 图 片 文件 了 。 


[Lj4. 2.7 插入 鼠标 经 过 图 像 


所 谓 眠 标 经 过 图 像 ， 束 是 当 限 标 移动 到 图 像 上 和 面 时 ， 切 换 成 为 一 幅 图 像 ， 同 时 可 以 通 
过 单 击 该 向 像 ， 打 开 链 接 的 网 页 。 

一 个 鼠标 经 过 图 像 其 实 是 由 两 张 图 片 组 成 的 ， 页 面 显示 的 图 像 和 鼠标 经 过 时 的 图 像 。 
这 两 张 图 片 应 具有 相同 的 尺寸 ， 如 有 果 两 张 图 厂 的 尺寸 不 同 ，Dreamweaver CS5 会 目 动 将 第 
二 张 图 片 的 尺寸 调整 成 第 一 张 图 片 的 尺寸 。 

下 面 通过 创建 一 个 具体 的 鼠标 经 过 图 像 ， 回 旋 者 演示 创建 鼠标 经 过 图 像 的 操作 步骤 。 

01. 在 文档 窗口 中 ， 将 光标 置 于 要 插入 妥 标 经 过 图 像 的 地 方 。 

02 9 执行 “插入 ”/“ 图 像 对 象 ”/“ 鼠 标 经 过 图 像 ” 命 令 ， 或 单 击 “ 插 入 ”/“ 常 用 ” 
面板 上 的 图 * 下 拉 箭头 ， 弹 出 如 图 4-27 所 示 的 下 拉 菜 单 ， 在 弹出 菜单 中 单 击 “ 鼠 标 经 过 图 
像 ”， 此 时 会 弹出 “插入 鼠标 经 过 图 像 ” 对 话 框 ， 如 图 4-28 所 示 。 

03 在 “图 像 名 称 ” 栏 中 输入 鼠标 经 过 图 像 的 名 称 。 
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对 话 框 中 浏览 选择 所 需 图 像 文件 。 
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图 4-27 — d FERE 图 4-28 插入 翻转 图 像 对 话 框 


05 9 在 “鼠标 经 过 图 像 ” 栏 中 输入 鼠标 经 过 时 要 显示 的 图 像 的 路 径 , 或 者 单 击 “ 浏 览 ” 
按钮 ， 从 弹出 的 对 话 框 中 浏览 选择 图 像 文 件 。 

06 选中 “ 预 载 忌 标 经 过 图 像 ” 复 选 框 ， 这 样 可 以 让 图 片 预先 加 载 到 浏览 器 的 缓存 
中 ， 加 快 图 片 的 下 载 速 度 。 

07 和 在 “ 符 换 文本 ”文本 框 中 输入 与 图 像 交 巷 的 文本 。 在 浏览 器 浏览 该 网 页 ， 当 限 
标 掠 过 图 像 时 ， 束 会 显示 这 些 文 本 。 

08 衣 在 “ 按 下 时 ， 前 往 的 URL” 文 本 框 中 输入 链接 的 文件 路 径 及 文件 名 ， 表 示 在 浏览 
时 单 击 鼠标 经 过 图 像 ， 会 打开 链接 的 网 页 。 也 可 通过 单 击 右边 的 “浏览 ”按钮 ， 从 弹出 的 
文件 选择 窗口 中 选择 合适 的 文件 。 

09 月 单 击 “ 确 定 ” 按 钮 ， 并 保存 文件 。 然 后 按 下 Fl12 键 在 看 效果 ， 如 网 4-29 所 示 。 当 
忌 标 疫 有 移 到 网 像 上 上 时， 显示 左 边 的 图 片 ; 当 将 鼠标 移 到 网 片 上 时 ， 显 示 右 边 的 网 ， 移 开 
鼠标 ， 则 又 显示 左边 的 图 片 。 


图 4-29 鼠标 经 过 前 后 的 图 像 效 末 


[DJ4. 2.8 导入 Fireworks HTML 


Fireworks 是 国内 比较 流行 的 Web 图 形 处 理 软件 ， 与 Dreamweaver 能 够 高 度 整 合 。 在 


同时 产生 相应 的 HTML 代 码 及 图 像 。 这 些 HTML 代 码 可 以 轻松 地 导入 到 Dreamweaver 中 ， 以 便 
让 Dreamweaver 结 合 其 他 功能 来 总 体 规 划 并 开发 网 站 。 
下 面 以 一 个 简单 示例 来 演示 导入 Fireworks _ HTML 的 方法 和 步骤 。 
01. 打开 Fireworks 软 件 ， 在 Fifreworks 中 创建 一 组 切片 图 像 。 上 有 具体 创建 方法 请 参考 
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Fireworks 相 关 书 籍 。 切 片 图 像 如 图 4-30 所 示 。 


图 4-30 ”Fireworks 中 设计 的 切片 图 像 


02. 在 Fireworks 中 ， 选 择 “ 文 件 ”/“ 导 出 ”命令 ， 将 图 像 导 出 为 “HTML 和 图 像 ”。 
03. 返回 到 Dreamweaver 文 档 窗口 ， 选 择 “ 插 入 ”/“ 图 像 对 象 ”/“Fireworks HTML" 
菜单 命令 ， 打 开 “ 插 入 Fireworks HTML” 对 话 框 ， 如 图 4-31 所 示 。 


插入 Fireworks HTML o 
CR 确定 

Fireworks HTML 女 件 : | pui. ] mccum 

WO 00 插入 后 册 除 文件 EE | 


图 4-31 “插入 Fireworks HTML" o iE 


04. 单 击 “ 浏 览 ” 按 钮 选择 刚 导 出 的 Fireworks 文 件 。 

05 如 果 和 希望 将 Fireworks _ HTML 代码 导入 到 Dreamweaver 之 后 ， 删 除 Fireworks 文 件 ， 
则 选中 “插入 后 删除 文件 ” 复 选 杠 。 

06 月 单 击 “ 确 定 ” 按 钮 导入 指定 的 Fireworks HTML 人 代码。 导入 后 的 页 面 效果 如 图 4-32 
Bt. 


图 4-32 导入 的 Fireworks HTML fF 


在 本 实例 的 导航 栏 中 ， 浏 览 者 可 以 实时 查看 当前 的 日 期 、 星 期 及 时 间 ， 且 自动 更 新 。 
效果 如 图 4-33 所 示 。 
制作 步骤 如 下 : 
01. 新 建 一 个 HTML 文 档 。 
02. 单 击 “ 搬 入 ” 栏 上 的 表格 图 标 按钮 ， 打 开 “ 表 格 ” 对 话 框 。 在 页 面 中 插入 一 个 
两 行 一 列 、 宽 度 为 200 像 素 、 边 框 为 0 的 表格 。 
其 中 ， 第 一 行 用 于 放置 导航 栏 的 图 标 和 日 期 时 间 ， 第 二 行 用 于 放置 具体 的 导航 项 目 。 
在 接 下 来 的 步骤 中 要 为 单元 格 设置 背景 图 像 。 上 自 Dreamweaver CS4 开 始 ， 在 单元 格 的 
属性 面板 中 已 找 不 到 “背景 图 像 ” 选 项 了 。 如 果 要 设置 表格 或 单元 格 的 背景 图 像 ， 需 要 使 
用 CSS 样 式 进 行 定 义 。 
03 肯 将 光标 置 于 第 一 行 第 一 列 的 单元 格 中 ， 然 后 单 击 其 属性 面板 左上 角 的 iecss 按 
钮 ， 在 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规 则 ”， 并 单 击 “ 编 辑 规则 ”按钮 打开 “新 
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建 CSS 规 则 对 话 框 ”。 

04 肯 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ”， 在 “选择 器 名 称 ” 中 键入 类 名 称 ， 
例如 . backgroundl1，“ 规 则 定义 ”选择 “ 仅 限 该 文档 ”。 然 后 单 击 “ 确 定 ” 按 钮 打开 如 图 
4-34 所 示 的 规则 定义 对 话 框 。 


a Ij C55 BUNGESE - : EL] 
EL RH 
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"8i pa ld E TT 1 
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Tun tr seer tian Q3: [7] andar ina (0) Ee 怀 
Dl er iiss Q1 
[ 111a tar reth iL) 
[uox 
[sana (E) 
图 4-33 ”日 期 时 间 显 示 效 果 图 4-34 ”规则 定义 对 话 框 


05 朋 在 对 话 框 左 侧 的 “分 类 ”列表 中 选择 “背景 ”， 然 后 单 击 “ 背 景 图 像 ” 右 侧 的 “ 浏 
览 ” 按 钮 ， 在 弹出 的 资源 对 话 框 中 选择 喜欢 的 育 景 图 片 。 单 击 “ 确 定 ” 按 钮 天 财 对 话 框 。 
06 肯 在 单元 格 属 性 面板 上 调整 单元 格 的 高 度 。 此 时 的 页 面 效 果 如 图 4-35 所 示 。 


200 = 


Hao mon noa 23 303 3 3 "o3 3 3 HOS OH BOR WO »OB 4 3 o8 OE HO OH BO OR ÀON o» 5» o» os a 


图 4-35 ”插入 两 行 一 列 的 表格 图 4-36 ”搬入 导航 图 标 


由 07 选中 第 一 行 的 单元 格 ， 在 属性 面板 的 “水 平 ” 下 拉 列 表 中 选择 “居中 对 齐 ”。 

08. 单 击 “插入 ” 栏 上 的 图 像 图 标 按钮 ， 打 开 “ 选 择 图 像 ”对 话 框 。 选 择 已 在 图 像 
编辑 软件 中 制作 好 的 图 标 ， 然 后 单 击 “确定 ”按钮 ， 将 其 插入 到 单元 格 中 。 此 时 的 页 面 效 
果 如 图 4-36 所 示 。 

009 月 将 光标 停留 在 插入 的 图 片 后 ， 然 后 按 下 Shift 键 的 同时 按 下 Enter 键 ， 在 单元 格 
中 插入 一 个 软 回 车 。 

和 10 单 击 “ 插 入 ” 栏 上 的 图 按钮 ， 打 开 “ 插 入 日 期 ”对 话 框 。 

e 在 “星期 格式 ”下 拉 列 表 中 选择 “Thursday”;“ 日 期 格式 ”选择 “1974-03-04”; 
“时 间 格 式 ” 选 择 “10: 18 PM”; 然后 选中 “储存 时 自动 更 新 ” 复 选 框 。 

12. 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 即 可 在 页 面 中 插入 日 期 、 星 期 及 时 间 。 效 果 如 

图 4-33 所 示 。 
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制作 起 链接 


Internet 的 核心 就 是 超级 链接 (Hyperlink ), 没有 链接 ， 
就 不 存在 World Wide Web。 通过 超级 链接 的 方式 可 以 使 各 
个 网 页 联接 起 来 构成 一 个 有 机 整体 , 使 访问 者 能 够 在 各 个 
页 面 之 间 跳 转 。 超级 链接 可 以 是 一 段 文 本 , 一 幅 图 像 或 其 
他 网 页 元 素 ， 当 在 浏览 器 中 用 鼠标 单 击 这 些 对 象 时 , 浏览 
器 可 以 载 入 一 个 指定 的 新 页 面 ， 或 者 转 到 页 面 的 其 他 位 
Bue 


00600 


认识 超级 链接 
创建 、 管 理 链接 
使 用 热点 制作 图 像 映 射 
实例 制作 之 制作 导航 条 


Vv 一 x" 
制作 超 链接 P mI 


EH BEBEH PA HA ZHA, 18547 ze EDU A 9 XL] n] DUE SUB EAT. MECAGES BEBE. 7 
一 部 分 是 超 链 接 所 链接 的 目标 。 在 浏览 页 面 时 ， 单 击 超 链 接 的 载体 将 会 打开 链接 目标 。 超 
链接 载体 可 以 是 文本 、 岁 像 ， 链接 的 目标 可 以 是 网 页 、 图 片 、 视 频 或 声音 和 电子 邮件 地 址 
等 。 例 如 : 单 击 如 图 5-1 所 示 的 产品 图 三 或 产品 名 称 ， 可 以 打开 如 图 5-2 所 示 的 产品 详细 介 
绍 页 面 。 
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上 ;指针 也 会 变 成 手 形 ， 
表明 信也 是 一 个 超 颖 链 
a4 dEBUESEE 


将 鼠标 移 到 产品 图 片 | 
上 ， 指针 变 成 手 形 ， 表 
| 明 这 是 一 个 超星 链接 的 
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。 AEIEECERH S dE BUT « MEEGEBURUREN GE ACT EN unt n | e pense 
图 5-1 单 击 超级 链接 的 载体 


欧 千 丹 元 "0ccitane 玲 花 味 闪 亮 润 肤 露 化 妆 品 品牌 专区 


:OBHEHRDIZHESSE 国内 化 妆 品 品 欧美 化 妆 品 品牌 
: BRÉRBR L 0eeitane [欧美 化 妆 品 品牌 ] 

: 护 体 — 止 汗 香 体 

Mer 其 他 化 妆 品 品 全 部 化 妆 品 品牌 


日 本 化 妆 品 品 韩国 化 妆 品 品牌 


: Y245 


: 加 入 收藏 夹 该 产品 已 被 浏览 : 221 


欧 每 丹 接 花 味 办 亮 润 肤 圳 产品 介绍 : 
RE AXES Eme ULIS, 同时 让 肌肤 有 些 级 般 光 滑 的 名 感 。 


《ib 网 友 对 “区 每 丹 构 花 味 闪 亮 洞 肤 露 ” 化 妆 品 的 评论 (1 条 ) 平均 得 分 : 


第 1 楼 : 妆 网 游客 [2008-12-10 12:57:39] iX: 
味道 真 的 是 好 好 . .，[ 评 分: XXe] 
味道 真 的 是 好 好 是， 味道 很 清淡 。 其 实 本 来 对 栅 花 的 末 西 不 是 很 喜欢 ， 可 是 包装 太 可 爱 了 ? 
1/2 的 人 觉得 此 评论 有 用 ， 您 认 当 : 有 用 ; 没 用 我 也 说 说 >> 


声明 : 以 上 关于 “ 欧 告 丹 机 花 味 闪 亮 润 肤 露 ” 的 使 用 心得 均 为 网 友 个 人 之 体验 ， 并 不 代表 要 网 意见 ,在 应 用 时 请 
注意 个 人 差别 。 


图 5-2 ”打开 的 链接 目标 


产品 图 片 或 产品 名 称 就 古 超级 链接 载体 ， 而 打开 的 产品 详情 页 面 则 是 链接 目标 。 

网 页 上 的 超 链接 一 般 有 三 种 :一 种 是 绝对 网 址 的 超 链 接 ， 例 如 http://www. tsighua. 
edu. cn 链接 到 清华 大 学 的 站 点 主页 ; 第 二 种 是 相对 网 址 的 超 链 接 ， 例 如 将 主页 上 的 儿 个 文 
学 链接 到 本 站 点 的 其 他 页 面 上 ; 还 有 一 种 是 同一 个 页 面 的 超 链接 ， 也 称 为 销 点 。 

了 解 了 超 链 接 的 基本 概念 和 分 类 之 后 ， 接 下 来 介绍 各 种 超 链 接 的 具体 创建 方法 。 


65 


Dreamweaver CS5 中 文 版 标准 实例 教程 


5.2 创建 、 管 理 链 接 


在 Dreamweaver CS5 中 创建 超级 链接 有 多 种 方法 ， 创 建 超 链接 后 ， 用 户 还 可 以 随时 对 
链接 和 载体、 链接 目标 和 和 链接 的 打开 方式 进行 修改 。 此 外 ， 还 可 以 通过 URL 面 板 统 一 管理 网 
站 中 的 所 有 超 链接 。 


[Ll.2.1 创建 文本 超 链接 


在 网 页 上 用 到 最 多 的 是 驶 是 文本 超 链接 ， 例 如 ， 音 击 文本 ， 跳 转 到 另 一 个 页 面 。 创 建 
文本 超 链接 的 方法 很 多 ， 下 面 通过 一 个 简单 的 示例 进行 简要 说 明 。 

01. 在 文档 窗口 中 选中 需要 建立 链接 的 文本 。 例 如 页 面 上 的 
http://www. sina. com. cn. 

在 一 般 的 情况 下 ,创建 超级 链接 是 通过 在 属 00 
性 面板 的 “链接 ”文本 框 中 完成 的 。 SPP Rider quan 


M ana A. 4$ 54]75* 
02 选择 ^ fd L1 á / « eg i Ne 命令 打 "3$ x "TH 
开 属 性 面板 。 在 “链接 ”后 的 文本 框 中 输入 链接 = 
目标 。 本 例 输入 http://www. sina. com. cn. UE S 


QE o6 Po pes 
为 有 源头 活 水 素 


操作 完成 后 , 可 以 看 到 被 选择 的 文本 变 为 赣 
色 , 并 且 市 有 下 划 线 。 在 浏览 器 中 将 女 标 移 到 文 
本 上 时 ， 鼠 标 指 针 变 为 手 形 。 如 图 5-3 所 示 。 图 5-3 ”超级 链接 效果 

默认 情况 下 ， 文 本 链接 显示 为 篮 色 ， 并 加 有 下 划 线 。 用 户 可 以 选择 “修改 ”/“ 页面 
属性 ” 采 蛙 命令 ,在 “页 面 属性 ”和 面板 的 “链接 ”分 类 页 面 设置 超级 链接 在 各 种 状态 下 的 
颜色 ， 以 及 选择 是 否 显 示 下 划 线 。 

如 末 链 接 目 标 是 计算 上 的 一 个 文件 或 图 厂 ， 可 以 单 击 “链接 ”文本 框 右 侧 的 文件 来 图 
标 品 ， 打 开 “ 选 择 文件 ”对 话 框 ， 查 找 并 选择 文件 。 或 者 选择 “指向 文件 ”图 标 党 ， 并 按 
下 鼠标 左 键 拖 动 到 “文件 ”面板 中 一 个 现存 的 页 面 。 
注意 : Dreamweaver 不 文 持 扩展 字符 集 〈 也 被 称 为 High ASCII) ， 所 以 在 指定 链接 的 URL 时 ， 不 能 包含 
扩展 字符 集 ， 且 完全 的 URL 最 多 不 能 超过 255 个 字符 。 此 外 ， 尽 管 大 多 数 浏览 器 可 以 解释 路 径 名 或 URL 
中 的 空格 ， 但 在 UNIX 应 用 中 ， 空 格 会 被 变 为 %20， 这 将 使 得 URL 比较 难看 。 

03 贞 在 “目标 ”下 拉 列 表 中 选择 打开 链接 目标 的 方式 。 即 可 创建 超 链 接 。 

此 外 ， 用 户 还 可 以 通过 执行 “插入 ”/“ 超 级 链接 ” 采 时 命令， 或 直接 单 击 “插入 ” 

栏 的 “常用 ”面板 下 的 超级 链接 按钮 县, 打开 “超级 链接 ”对 话 框 设 置 选 定 文本 的 超 链 接 。 


[15.2.2 创建 图 片 链接 


很 多 情况 下 ， 为 了 去 挥 文本 链接 献 认 的 下 划 线 效果 或 美化 页 面 ， 网 页 设计 者 会 选择 用 
图 片 代 蔡 文本 创建 超 链接 ， 这 种 方式 适用 于 所 有 能 识别 图 形 的 浏览 器 。 

创建 图 片 链接 的 方法 与 创建 文本 链接 大 化 相同 ,不 同 之 处 在 于 链接 的 载体 是 图 记 ， 而 
不 是 文本 。 下 和 而 通过 为 一 个 图 上 厂 创 建 超 链接 ， 问 读者 演示 创建 图 厂 链 接 的 步 又 。 
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是 让 选中 需要 创建 链接 的 图 片 。 如 图 5-4 所 示 的 Google 网 徽 。 
选中 要 创建 链接 


图 5-4 选 定 需要 设置 超 链接 的 图 片 
02 在 属性 面板 的 “链接 ”文本 框 中 键入 超 链 接 的 URL。 本 例 输入 http://www. google. 


COm. Cle 

03 在 “替换 ”下 拉 列 表 中 键入 “Google”。 在 浏览 器 中 ， 当 该 图 片 没 有 下 载 时 ， 
在 图 片 所 在 位 置 显示 替换 文本 。 

04 在 “目标 ”下 拉 列 表 中 选择 打开 该 网 站 的 方式 。 本 例 使 用 默认 设置 。 

至 此 ， 图 片 链 接 创建 完毕 。 用 户 可 以 按 F12 键 在 浏览 右 中 预览 。 

使 用 图 片 链接 时 , 如 果 在 属性 面板 中 为 图 片 设置 了 边框 , 或 边 "TP 明确 地 指定 为 ， 
则 浏览 右 中 的 链接 图 像 通常 显示 一 个 监 色 边框 ， 如 图 5-5 所 示 。 

如 果 不 布 望 显示 该 览 色 边框 ， 可 以 在 图 像 的 属性 面板 中 ， 将 “边框 ” 显 式 地 设置 为 0。 


o» ging Ü EE 


FHCHI? OQ — aíaxcnnankwnm 


Google 


图 5-5 ”设置 了 边框 的 图 片 链接 


[[15.2.3 ”链接 到 命名 锚 点 


通常 情况 下 ， 当 使 用 绝对 地 址 或 相对 地 址 链接 到 一 个 Web 页 面 时 ， 浏 览 器 都 会 重新 载 
入 并 显示 这 个 页 面 。 如 果 网 页 的 内 容 比较 多 ,浏览 者 就 必须 通过 滚动 方式 来 查看 当前 屏 希 
以 下 的 信息 。 使 用 命名 锚 点 则 可 以 立即 响应 浏览 者 单 击 锚 点 的 事件 ， 由 于 整个 页 面 已 被 载 
入 ， 所 以 浏览 器 只 需 移动 到 文档 中 的 特定 位 置 。 这 种 技术 使 得 用 户 能 够 迅速 定位 需要 的 主 
题 或 返回 采 单 ， 而 无 需 手 工 来 回 深 动 页 面 了 。 
fpe on 常用 于 长 篇 文章 、 技 术 文 件 等 内 容 的 网 页 ， 通 党 放置 在 网 页 中 每 个 屏幕 或 每 
主题 之 后 , 当 用 户 单 击 某 一 个 命名 锚 点 时 可 以 转 到 网 页 的 特定 段 沙 , 以 方便 文章 的 阅读 。 
下 面 通过 一 个 简单 实例 问 读者 渤 示 命名 销 点 的 使 用 方法 。 
01 将 光标 放 在 欲 设 置 销 点 的 位 置 。 如 图 5-6 所 示 的 “ 观 书 有 感 ” 之 前 。 
02 和 单 击 “ 插 入 ”面板 上 的 “常用 ”标签 ， 然 后 选择 命名 锚 记 图 标 哇 ， 打 开 “ 命 名 
萌 记 ”对 话 框 。 在 “ 锚 记 名 称 ” 文 本 框 中 键入 锚 点 的 名 称 。 本 例 输入 “ml”。 
注意 : 锚 点 名 称 必须 是 惟一 的 ， 只 能 包含 小 写 的 ASCII 字母 和 数字 ， 且 不 能 以 数字 开头 。 
03. 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 在 页 面 中 指定 的 位 置 即 可 看 到 插入 的 命名 销 点 。 
效果 如 图 5-7 所 示 。 
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md m *H 取笑 


图 5-6 指定 插入 销 点 的 位 置 


联系 作者 : comey@163.net 
链接 到 新 良 ，Http:jrrrwrwr sina cotn cn 


A $ £g 


春日 A 


LAN FE t 4 8 a 


Ap BS E 


半 亩 方 塘 一 鉴 开 
天 光 云 影 共 徘 条 
IB A8 mr 
为 有 源头 活水 来 


图 5-7 插入 的 命名 销 氮 


提示 : 如 条 看 个 到 销 记 标记 ， 可 选择 “ 奉 看 ”/“ 可 视 化 助理 ”/“ 不 可 见 元 素 ” 命 令 。 

04 选择 要 链接 到 命名 销 点 的 文字 。 例 如 图 5-7 中 ， 水 平 线 以 上 的 “ 观 书 有 感 ”。 然 
后 在 属性 设置 面板 的 “链接 ”文本 框 中 输入 销 扣 的 名 称 。 本 例 输入 “#m1”。 
注意 : 在 “链接 ”文本 框 中 输入 锚 点 名 称 时 ， 需 要 在 销 点 名 称 前 面 添加 一 个 特殊 的 符号 “#”。 例 如 : Stop, 
其 中 ，top 为 俞 名 锚 氮 。 如 朱 所 链接 的 锚 氮 不 在 当前 文档 中 ， 则 在 “链接 ”文本 框 中 首先 要 诬 加 链接 页 面 
的 URL， 然 后 输入 井 号 和 锚 点 名 称 。 例 如 ， 如 采 要 在 当前 页 面 调 用 同一 文件 夹 中 的 index. html 负面 上 名 
为 top 的 销 点 ， 则 应 在 “链接 ”文本 框 中 输入 index. html#top。 

用 户 可 以 在 当前 页 面 或 者 另 一 页 面 中 座 加 任意 数量 的 命名 锚 氮 。 命 名 锚 点 通 稍 与 目 孙 

或 索引 列表 结合 使 用 。 

05 中 参照 上 和 耐 的 步 又 , 在 “春日 ”和 “ 沁 丹 ”两 肯 计 之 前 也 洪 加 命名 销 扣 , 分 列 为 “m2” 
和 “m3”， 然 后 为 相应 的 文本 添加 超 链接 ， 链 接 到 命名 销 点 。 


[[]5.2.4 创建 E-Mail 链接 


为 了 使 访问 者 在 访问 站 点 时 能 轻松 地 在 网 络 上 与 网 络 管理 者 取得 联系 ， 一 个 最 简单 的 
办 法 就 是 在 页 面 的 适当 位 置 加 上 网 络 定 理 者 的 E-mail 地 址 的 超 链 接 。 只 要 访问 者 早 击 这 个 
地 址 ， 惑 可 以 调用 黑 认 的 电子 邮件 程序 ， 并 痢 建 一 个 邮件 窗口 ， 给 网 络 管理 者 上 肥大 电子 邮 
件 了 。 如 果 需 要 ， 用 户 还 可 以 目 定 义 发 送 主题 、 内 容 、 抄 送 和 上 暗 迷 等 。 
下 面 通过 一 个 简单 例子 演示 创建 E-Mail 链 接 的 步 又。 
0 人 时 在 文档 窗口 的 设计 视图 中 ， 选 中 需要 创建 EMail 链接 的 文本 或 图 像 。 如 图 5-8 所 
示 的 邮箱 图 标 。 
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02 在 属性 面板 的 “链接 ”文本 框 中 输入 发 件 人 的 地 址 。 本 例 输 入 mailto:webmaster 
0123. com。 然 后 在 “ 符 换 ”文本 框 中 键入 等 换文 本 “Fnmail”。 


Y Li " ^r 
联系 我 们 LL 产 联系 我 们 
图 5-8 ”选中 要 创建 邮件 链接 的 图 片 图 5-9 ”电子 邮件 链接 


03 9 你 存 文档 ， 并 按 本 2 键 预 览 页 面 。 效 果 如 图 5-9 所 示 。 在 浏览 网 页 时 ， 在 该 超 链 
接 上 单 击 鼠 标 ， 即 可 打开 默认 的 电子 邮件 编辑 器 编辑 邮件 ， 收 件 人 邮件 地 址 目 动 填充 为 指 
定 的 电子 邮件 地 址 。 
细心 的 读者 可 能 已 注意 到 了 ， 在 “链接 ”文本 框 中 输入 邮件 地 址 时 ， 和 创建 常规 超 链 
接 不 同 ， 在 邮件 地 址 前 面 必 须 谎 加 “mailto:”， 表 示 该 超级 链接 是 邮件 链接 。 
如 果 没 有 选中 任何 文本 或 图 像 ， 用 户 可 以 通过 “电子 邮件 链接 ”对 话 框 在 页 面 中 插入 
E-Mail 链 接 。 例 如 下 面 的 示例 。 
01 将 插入 点 放置 在 需要 添加 邮件 链接 的 位 置 。 例 如 “联系 作者 : z Jie 
02. "Ri "HU geb rursEBEDCEUgH, skRDAT "dA / “电子 邮件 
链接 ” 琳 蛙 命令 ， 弹 出 “电子 邮件 链接 ”对 话 框 。 
03. 在 “文本 ” 域 中 键入 要 显示 在 页 和 面 上 的 链接 文本 ， 本 例 输入 webmaster; 在 
“E-mail” 域 中 输入 所 要 发 送 到 的 E-mail 地 址 ， 本 例 输入 webmaster@123. com. 
04 单 击 “确定 ”按钮 关闭 对 话 框 ， 并 完成 链接 的 创建 。 
05 几 保存 文 要 ， 并 按 F12 键 在 浏览 句 中 了 预览。 页 面 效 果 如 图 5-10 所 示 。 


[QA EAER - UN Dnosthoo] IC ICI) 
xF"Mp wp -sdo wm tg (xo IAD wow Wo Stefioo 
] > 3-x-i23-€£» 3: s8- c9 9 -m- qp 
"Bub 91 fsJE'IO2 c2 2130€ $1. gag: 
nt xw d wrbin Ner 
IDEGRUE SEI Mp weis W.*ma com en 
X 43$6m4 
ATE sg Indre 
"Un m 
871€ — «7T 
oz Ritt B 
[m iB DE RHAR Ani 
为 有 源头 活水 过 
50 $$5*2$0 12129.201.200 0 FS X 


图 5-10 Jmm 


在 “文本 ” 域 中 输入 的 文本 显示 为 超 链 接 文 本 ， 当 将 鼠标 移 到 该 文本 上 时 ， 状 态 栏 显 
示 该 链接 的 具体 地 址 mailto:webmaster@123. com. 


[js.2.5 虚拟 链接 和 脚本 链接 


虚拟 链接 也 称 为 空 链 接 ， 是 指 没 有 指定 的 链接 ， 一般 用 于 向 负 耐 上 的 文本 或 对 象 添加 
行为 。 虚 拟 链 接 主 要 包含 以 下 两 种 格式 : 
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€ 《a href=#> 虚 拟 链 接 《/a> 
€ 4a href=javascript::;》 虚 拟 链 接 《/a> 
第 1 种 格式 被 单 击 时 将 返回 到 页 面 项 部 ， 这 种 格式 无 法 添加 行为 ;第 2 种 格式 则 不 会 发 
生 任何 动作 ， 允 好 像 根本 没有 单 击 一 样 。 
如 条 为 第 2 种 虚拟 链接 谎 加 了 动作 脚本 ， 则 执行 相应 的 动作 行为 ， 此 时 的 链接 即 为 脚 
本 链接 。 脚 本 链接 可 以 执行 JavaScript 代码 或 调用 JavaScript 函数 ， 用 于 在 不 离开 当前 
网 页 的 情况 下 给 予 访 问 者 有 关 项 目的 补充 信息 。 脚 本 链接 也 可 用 于 在 访问 者 点 击 特定 项 目 
时 执行 计算 、 表 单 验 证 和 其 它 处 理 任务 。 
下 面 通过 一 个 简单 实例 演示 创建 虚拟 链接 和 脚本 链接 的 方法 及 功能 。 
01 选择 欲 作 为 虚拟 链接 的 文本 ， 例 如 图 5-11 所 示 的 “返回 页 面 顶端 ”。 
02 和 打开 属性 设置 面板 。 在 属性 设置 面板 的 “链接 ”文本 框 中 输入 “#” 或 
“javascript:;”， 用 户 要 注意 ，javascript 一 词 后 依次 有 一 个 冒号 和 一 个 分 号 。 
03 上 选择 需要 作为 脚本 链接 的 文本 ， 例 如 图 5-11 所 示 的 “进入 VIP 通道 ”。 
04 目 在 属性 设置 面板 的 “链接 ”文本 框 中 输入 脚本 ， 如 : JavaScript:alert ( 只 
VIP 会 员 方 可 进入 ! ^) 。 括 号 中 的 内 容 必 须 使 用 单 引 号 ， 或 在 双 引 号 前 添加 反 和 疼 杠 进行 转 
义 ， 例 如 ，JavaScript:alert(\ 只 有 VIP 会 员 方 可 进入 ! \ ) 。 
05 上 保存 文 要 ， 按 Fl12 键 在 浏览 器 中 浏览 。 
当 把 鼠标 移动 到 虚拟 链接 或 脚本 链接 上 时 ， 鼠 标的 形状 变 为 手 形 ， 单 击 虚拟 链接 “ 返 
加 页 面 项 痕 ” 后 ， 页 面 会 返回 到 顶 痪 ， 单 击 脚 本 链接 “进入 VIP 通道 ”后 ， 会 弹出 一 个 警 
告 框 ， 显 示 “ 只 有 VIP 会 员 方 可 进入 ! ”， 如 图 5-12 所 示 。 


虚拟 链接 和 脚本 链接 
虚拟 链接 和 脚本 链接 

n Mirosolt intemet oplorer 个 
MS EN E 02-3 LEN] 

[ mx 
进入 VIP 通 适 MEANVI VB 
Wt qu EBENE 

图 5-11 添加 链接 前 的 页 面 效 果 图 5-12 页面 效 果 


[I]5. 2.6 使 用 URL 面 板 管理 超 链 接 


对 于 茶 些 大 型 站 点 来 说 ， 处 理 所 有 超 链 接 资 源 的 完整 列表 可 能 会 变 成 很 棘手 的 问题 。 
利用 Dreamweaver 提 供 的 URL 面 板 ， 可 以 将 所 有 链接 资源 归 类 在 一 起 ， 为 资源 指定 别名 以 指 
明 用 途 ， 以 便 日 后 查找、 维护 资源 。 

URL 的 全 称 是 Uniform Resource Locator 〈 统 一 资源 定位 器 ) 。 从 最 简单 的 单一 页 面 
到 复杂 的 综合 站 点 ， 所 有 的 资源 内 容 都 可 以 通过 URL 面 板 进行 访问 。 下 面 通 过 两 个 简单 例 
子 演示 新 建 URL 和 编辑 URL 的 方法 。 

01 朋 选择 “窗口 ”/“ 资 源 ” 来 单 命 令 ， 打 开 “ 资 源 ” 面 板 。 
02 用 单 击 “ 资 源 ” 面 板 左 侧 的 URLs 按 钮 村， 切换 到 “URLs” 面 板 。 如 图 5-13 所 示 。 
“URLs” 和 面板 有 两 种 视图 : 站 点 和 收藏 。 站 点 视图 如 图 5-13 所 示 ， 在 该 面板 下 方 的 列 
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表 窗 格 中 , 列 出 了 当前 站 点 中 使 用 的 所 有 链接 资源 及 类 型 ,包括 FTP. gopher. HTTP. HTTPS, 
JavaScript、 电 子 邮 件 (mailto) 以 及 本 地 文件 Cfile://) 链接 。 
收藏 视图 用 于 收藏 曾 用 的 资源 。 收 藏 资源 并 不 作为 单独 的 文件 存储 在 磁盘 上 ， 它 们 是 
对 “站 点 ”视图 列表 中 的 资源 的 引用 。“ 站 点 ”视图 和 “收藏 ”视图 的 大 多 数 操 作 都 是 相 
同 的 ， 不 过 ， 有 儿 种 任务 只 能 在 “收藏 ”视图 中 执行 
03. 单 击 “收藏 ” 单 选 授 钮 ， 切 换 到 “收藏 ”视图 ， 如 图 5-14 所 示 。 
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在 这 里 的 单 选 控 
钮 组 中 切换 视图 


图 5-13 ”站 点 视图 图 5-14 ”收藏 视图 
04 月 单 击 “收藏 ”视图 右 下 角 的 “新 建 URL” 按 钮 名 ， 弹 出 “添加 URL” 对 话 框 ， 
如 图 5-15 所 示 。 
05 4E" YR URL” 对 话 框 中 输入 URL 以 及 昵称 ,本 例 在 “URL” 文 本 框 中 输入 http:// 
www.baidu. com; 在 “昵称 ” 栏 键入 “百度 搜索 ”。 
06. Hu "Wi" HO TE. 
Jytmp, dE "uae Eu ECESUSISEBJURL, TÉ P7T EJ fe HP EZ VRURLIBJBERR 2g 
“百度 搜索 ”， 类 型 为 “HTTP”， 值 为 http://www. baidu. com， 如 图 5-16 上 所 示 。 
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图 5-15 “添加 URL” 对 话 框 图 5-16 添加 URL 


07 在 Dreamweavet 文 档 窗 口中 选中 要 应 用 该 UREL 的 文本 或 镜像 ， 如 图 5-17 所 示 。 


图 5-17 选中 文本 图 5-18 ”应 用 URL 图 5-19 ”插入 URL 
08. 在 “URLs” 和 面板 的 “收藏 ”视图 中 选中 需要 的 URL， 例 如 “百度 搜索 ”， 人 然后 单 
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击 视图 底部 的 “应 用 ”按钮 ， 即 可 将 指定 的 URL 应 用 到 选 定 文 本 ， 如 图 5-18 所 示 。 

109. 如 果 在 第 7 步 中 没有 选中 文本 ， 而 是 将 插入 点 放 在 文本 后 面 ， 则 “收藏 ”视图 底 
部 的 “应 用 ”按钮 变 为 “插入 ”按钮 ， 单 击 该 按钮 ， 可 在 插入 点 处 插入 指定 的 链接 文本 ， 
如 图 5-19 所 示 。 


在 通常 情况 下 ， 一 个 图 像 只 能 对 应 一 个 超 链接 。 在 浏览 网 页 的 过 程 中 ， 读 者 可 能 会 过 


下 面 通过 一 个 实例 来 说 明 如 何 创 建 图 像 映 射 。 
01 新 建 一 个 文件 。 单 击 “ 插 入 ” 栏 中 的 图 像 按钮 图 ， 在 文档 窗口 中 插入 一 幅 图 像 。 
如 图 5-20 左 图 所 示 。 


扩 ; 再 在 左下 角 单 击 鼠 标 左 键 ， 加 入 第 二 个 定位 护 ， 这 时 两 个 定位 扩 间 会 连 成 一 条 和 直线。 
按 同 样 的 方法 再 添加 三 个 定位 点 ， 此 时 五 个 定位 点 会 连 成 一 个 五 边 形 ， 将 “ 九 宗 沟 ” 三 个 
字 包 围 。 


07 月 按照 第 (5) 步 和 第 (6) 步 的 方法 ， 为 “三 亚 ” 添 加 多 边 形 热点 。 然 后 在 属性 
面板 上 设置 其 链接 属性 。 最 终 效 果 如 图 5-20 右 图 所 未 。 


A 


— 
^ "x 
B Jd. 
T SU 
EC b 
, uk zd d 
Pa 
] 
€ ] 
: 
1 
| 


图 5-20 ”插入 热点 区 域 前 后 的 效果 
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08. 执行 “文件 ”/ “保存 ”命令 保存 文档 。 然 后 按 下 F12 在 浏览 右 中 预览 整个 页 面 ， 


在 绘制 热点 区 域 后 ， 常 常 需要 调整 热点 区 域 的 大 小 和 形状 ， 以 满足 设计 需要 。 


次 可 以 移动 10 个 像 系 。 如 打下 接 按 方 丫 键 ， 则 一 次 只 能 移动 一 个 像素 。 


在 上 一 章 的 实例 制作 中 已 完成 了 导航 条 的 一 部 分 ， 本 下 将 制作 具体 的 导航 项 目 并 为 导 
航 项 目 添 加 超级 链接 。 

01. 将 光标 定位 在 如 图 5-21 所 示 的 第 二 行 单元 格 中 ， 然 后 单 击 属性 和 面板 上 的 拆 分 时 
元 格 按钮 其 ， 打 开 “ 拆 分 单元 格 ” 对 话 框 。 

02. 在 对 话 框 中 选中 “ 行 ”， 并 在 “ 行 数 ” 微 调 框 中 输入 3， 然 后 单 击 “ 确 定 ” 按 钮 ， 
将 第 二 行 单元 格 拆 分 为 3 行 。 

03 强 单 击 “ 插 入 ”面板 上 的 图 像 图 标 按钮 ， 在 打开 的 “选择 文件 ”对 话 框 中 选中 需 
要 的 图 片 ， 然 后 单 击 “ 确 定 ” 按 钮 插入 图 片 。 此 时 的 页 面 效 末 如 图 5-22 所 示 。 


" ai " a " ir 
iUe. Kk 3 kr 


db 


图 5-21 导航 条 效果 图 5-22” 拆 分 单元 格 并 插入 图 片 后 的 效果 
04 在 属性 面板 上 为 第 三 行 的 单元 格 设 置 育 景 图 像 ， 并 在 第 四 行 的 单元 格 中 插入 一 


幅 图 片 ， 调 整 单元 格 到 合适 的 高 度 。 此 时 的 页 面 效 果 如 图 5-23 所 示 。 

05 打开 “插入 ”浮动 面板 ， 并 切换 到 “布局 ”面板 。 然 后 单 击 “布局 ”面板 “标准 ” 
模式 下 的 “绘制 AP div” 图 标 。 此 时 ， 鼠 标 指针 变 成 一 个 十 字形 。 

06. 按 下 Ctrl1 键 的 同时 在 第 三 行 的 单元 格 中 按 下 鼠标 左 键 并 拖 动 ， 绘 制 5 个 AP 元 素 。 
效果 如 图 5-24 所 示 。 

07 将 光标 定位 在 第 一 个 AP 元 素 内 ， 单 击 “ 插 入 ”/“ 常 用 ”面板 上 的 图 像 按钮 ， 在 
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打开 的 “选择 文件 ”对 话 框 中 选择 已 在 图 像 编辑 软件 中 制作 好 的 第 一 个 导航 项 目 ， 然 后 单 
击 “ 确 定 ” 控 钮 插入 所 需要 的 图 厂 。 

08. 按照 上 一 步 的 方法 ， 在 其 他 4 个 AP 元 每 中 插入 号 航 项 目 ， 并 调整 AP 元 素 的 大 小 和 
位 首 。 此 时 的 效果 如 图 5-25 所 示 。 


图 5-23 ”设置 表格 背景 图 5-24 ”绘制 AP 元 素 图 5-25 ”插入 图 片 


09 上 月 选中 第 一 个 导航 项 目 图 片 ， 在 属性 面板 中 将 其 边框 设置 为 0;， 单 击 “ 链 接 ” 文 本 
框 右 侧 的 “指向 文件 ”图 标 党 ， 并 按 下 鼠标 左 键 拖 动 到 “文件 ”面板 中 一 个 现存 的 页 面 
write.html。 然 后 释放 鼠标 ， 即 可 将 选 定 的 导航 项 目 图 片 链接 到 指 同 的 文件 。 
10 睛 在 “目标 ”下 拉 列 表 中 选择 链接 目标 打开 的 方式 。 本 例 暂 时 保留 默认 设置 ， 具 
体 设置 将 在 后 面 的 革 市 中 进行 修改 。 
11. 同 理 ， 为 其 他 三 个 导航 图 片 添加 超级 链接 ， 分 别 链 接 到 shop. asp? . xiangce. 
html、 liuyan. htmj]。 
在 这 里 ， 初 学 者 需要 注意 ， 在 链接 到 shop. asp 网 页 时 ， 雷 要 添加 一 个 “? ”后 级 。 我 
们 通常 见 到 的 网 页 的 后 级 是 .htm、. html、. shtml、. xml 等 ， 这 是 静态 网 页 的 常见 形式 。 
与 此 相对 应 的 是 动态 网 页 ， 其 网 页 URL 的 后 级 为 . asp、. aspx、. jsp、.php、.perl、. cgi 
等 形式 , 上 且 在 访问 动态 网 页 时 , 其 网 址 中 有 一 个 标志 性 的 符号 一 一 “2?”, 例如 : http: / / ww. 
pagehome. cn/ip/index. asp?id=1。 在 本 实例 中 ，shop. asp 束 是 一 个 动态 网 页 。 
动态 网 页 中 的 “? ”对 搜索 引擎 检索 存在 一 定 的 问题 ， 搜 索引 擎 一 般 不 可 能 从 一 个 网 
站 的 数据 库 中 访问 全 部 网 页 ， 或 者 出 于 技术 方面 的 考虑 ， 不 去 抓 取 网 址 中 “? ”后 面 的 内 
容 ， 因 此 采用 动态 网 页 的 网 站 在 进行 搜索 引擎 推广 时 需要 做 一 定 的 技术 处 理 才 能 适应 搜索 
引擎 的 要 求 。 
121 9 选中 第 四 个 导航 图 厂 ， 即 “友情 链接 ”， 在 其 属性 面板 的 “链接 “文本 框 中 输 
入 http://www. uy123. com/。 
13 选中 第 二 行 单元 格 中 插入 的 图 片 ， 即 蝴蝶 图 片 。 打 开 属 性 面板 ， 单 击 面板 底部 


15) 在 属性 面板 的 “链接 ”文本 框 中 输入 网 站 首页 的 URL， 即 index. html: “目标 ” 
Jp blank, 在 “替换 ”文本 框 中 输入 “返回 首页 ”。 
16) 单 击 第 四 行 单元 格 中 插入 的 图 片 ， 在 属性 面板 的 “链接 ”文本 框 中 输入 “#”， 
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“边框 ”为 0。 即 为 该 图 片 创建 了 一 个 虚拟 链接 ， 且 在 浏览 器 中 无 边框 显示 。 在 浏览 器 中 
单 击 此 图 片 后 ， 将 返回 到 页 面 顶 部 。 


17 保存 文件 ， 并 按 F12 键 在 浏览 如 中 预 帘 效 来 、 检 查 超级 链接 。 
单 击 可 航 项 目 图 片 ， 即 可 切换 a 到 相应 的 页 面 。 由 于 其 他 页 面 还 未 制作 ， 因 此 是 空 日 页 
面 。 单 击 导 航 条 中 的 蝴蝶 ， 可 返回 到 主页 ; 单 击 导航 条 压 部 的 图 片 ， 即 可 返回 到 页 面 项 问 。 
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HTML 是 网 页 的 主要 组 成 部 分 ， 网 页 基本 上 都 是 由 
HTML 语 言 组 成 的 ， 可 以 说 HTML 是 网 页 的 骨架 。 因 此 ， 
要 制作 出 精彩 的 网 页 ， 必须 从 网 页 的 基本 语言 学 起 , 适当 
地 了 解 一 些 HTML 语 言 的 知识 ， 对 开发 网 页 是 大 有 神 益 
的 。 

CSS X Cascading Style Sheets( 层 登 样式 表单 ) 的 简称 。 
顾名思义 ， 它 是 一 种 设计 网 页 样式 的 工具 ， 可 以 增强 网 页 
修饰 和 增加 网 页 个 性 。 利 用 CSS 样 式 ， 不 仅 可 以 将 所 有 样 
式 信 息 集 中 到 页 面 的 一 个 地 方 , 而 且 还 可 以 为 其 创建 一 个 
样式 表 文 件 ， 应 用 于 多 个 页 面 。 
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HTML 语言 概述 
HTML 的 语法 结构 
常用 的 HTML 标签 
CSS 样式 

CSS 样式 的 应 用 
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HTMLZÉHypertext Markup LanguageH'] E BEAR, 3 MMTEXEBOCANTN d ni» BUE XC 
本 链接 标示 语言 ， 它 是 基于 SGML (Standard General Markup Language， 标 准 通 用 标签 语言 
的 一 种 摘 述 性 语言 ， 由 W3C (World wide Web Consortium， 全 球 信 息 网 协会 ) 推出 ， 并 被 国 
际 标 准 IS08879 所 认可 ， 是 用 于 建立 web 页 面 和 其 他 超级 文本 的 语言 ， 是 WWW 的 描述 语言 。 

HTML 并 不 是 真正 的 程序 设计 语言 ， 它 只 是 标签 语言 。 使 用 HTML 编 写 的 网 页 文件 是 标准 的 
ASCII 文 件 , 扩展 名 通常 为 . htm 或 . htm1。 了 解 网 页 的 用 户 可 能 听 说 过 许多 可 以 编辑 网 页 的 软 
件 ， 事 实 上 ， 用 户 可 以 用 任何 文本 编辑 器 建立 HTML 页 面 ， 例 如 Windows 的 “记事 本 ”程序 。 

HTML 文 本 是 由 HTML 命 令 组 成 的 描述 性 文本 ， 它 能 独立 于 各 种 操作 系统 平台 《〈 如 UNIX， 
WINDOWS 等 ) 。HTML 命 令 可 以 说 明文 学 、 图 形 、 动 夯 、 声 首 、 表 格 、 链 接 每 。 使 用 HTML 语 
言 描述 的 文件 ， 需 要 通过 WWW 浏 览 右 显示 出 效果 ， 浏 览 器 的 主要 作用 束 是 解释 超 文 本 文件 
中 的 语言 。 当 用 浏览 器 打开 网 页 时 ， 浏 览 右 先 读 取 网 页 中 的 HTWL 人 代码， 分 析 其 语法 结构 ， 
然后 根据 解释 的 结果 ， 将 单调 乏味 的 文字 显示 为 丰富 多 彩 的 网 页 内 容 ， 而 不 是 显示 事先 存 
储 于 网 页 中 的 内 容 。 正 是 因为 如 些 ， 网 页 显示 的 速度 同 网 页 代码 的 质量 有 很 大 的 天 系 ， 保 
持 精 简 和 高 效 的 HTML 源 代码 是 非常 重要 的 。 

近年 来 ， 用 户 可 能 经 常 在 网 络 上 看 到 “HTML5”。 所 谓 HTML5， 是 针对 HTML4 而 言 的 ， 
简单 地 说 ， 就 是 下 一 代 的 HTML， 是 W3C 与 WHATWG (Web Hypertext Application 
Technology Working Group) 双方 合作 创建 的 一 个 新 版 本 的 HTML, 将 成 为 HTML. XHTML 以 
及 HTML DOM 的 新 标准 ， 其 前 身 名 为 Web Applications 1.0。HTML 5 增加 了 更 多 样 化 的 API， 
提供 了 先入 音频 、 视 频 、 图 所 的 函数 、 客 户 端 数据 存储 ， 以 及 交互 式 文 要 。 下 面 我 们 来 简 
单 了 解 一 人 HTML5 中 的 一 些 有 趣 的 新 特性 : 

信用 于 绘 男 的 canvas 7628 
用 于 媒介 回放 的 video 和 audio 元 素 
对 本 地 离线 存储 的 更 好 的 支持 
新 的 特殊 内 容 元 素 ， 比 如 article. footer. header. nav. section 
新 的 表单 控件 ， 比 如 calendar. date. time. email. url. search 

HTML 5 通过 制定 如 何 处 理 所 有 HTML 元 票 以 及 如 何 从 错误 中 恢复 的 精确 规则 ， 改 进 
了 互 操作 性 ， 并 减少 了 开发 成 本 。 尽 管 HTML5 仍 处 于 完善 之 中 ， 推 出 正式 规范 仍 须 多 年 的 


人 29 多 


努力 ， 然 而 ， 现 在 大 部 分 现代 浏览 器 已 经 具备 了 某 些 HTML5 文 持 ， 例 如 Firefox、Chrome、 
Opera. Safari (版 本 4 以 上 ) 及 Internet Explorer 9 (Platform Preview) 已 文 援 HTML5 
技术 。 相 信 在 不 久 的 将 来 ， 网 页 设计 师 们 融 可 以 使 用 HTML5 和 CSS3 设 计 页 面 代码 更 吝 有 语 
A.  TLUT CIR. SEC] P9 D f E m e 


标准 的 HTML 由 标签 和 文件 的 内 容 构成 ， 并 用 一 组 “<“” 与 “>” 括 起 来 ， 且 与 字母 的 大 
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小 与 无 关 。 例 如 : 

《img src-"images/fantasybfloatb.gif/ width- 90" height-^51" />《b> 买 家 须知 4]b> 
在 用 浏览 右 显 示 时 ， 标 签 b> 和 《</b> 不 会 被 显示 ， 浏 览 融 在 文档 中 发 现 了 这 对 标签 ， 

束 将 其 中 包容 的 文学 (本 例 中 是 “ 买 家 须知 ”) 以 粗 体形 式 显 示 ， 如 图 6-1 所 示 。 


EE y 


图 6-1 “b> 标 签 的 示例 效果 

关于 标签 ， 需 要 提请 读者 注意 的 是 ， 它 们 是 成 双 出 现 的 。 每 当 使 用 一 个 标签 ， 例 如 
《<blockquote>， 则 必须 用 男 一 个 标签 </blockquote》 将 它 关 闭 。 但 是 也 有 一 些 标签 例外 ， 
例如 ，<input》 标 签 束 不 需要 。 

严格 地 说 ， 标 签 和 标签 元 到 不 同 ， 标 签 元 素 是 位 于 “<” 和 和 “>” 符号 之 间 的 内 容 ， 如 
上 例 中 的 “ 买 家 须知 ”;， 而 标签 则 包括 了 标签 元 素 和 “<” 和 “>” 符 号 本 映 。 但 是 ， 通 常 
将 标签 元 素 和 标签 当 作 一 种 东西 ， 因 为 脱离 了 “<” 和 “>” 符 写 的 标签 元 素 坚 无 意义 。 在 
本 草 后 面 的 小 廊 中 ， 不 作 特别 说 明 ， 将 标签 和 标签 元 素 统 一 称 作 “标签 ”。 

一 般 来 说 ，HTML 的 语法 有 以 下 3 种 表达 方式 : 

e 《标签 > 对 象 4/ 标 签 > 

e “标签 属性 1= 参 数 1 属性 2= 参 数 2> 对 象 《</ 标 签 > 

e 《标签 > 


[Lle.2. 1 “标签 ?对象 </ 标 签 》 


这 种 语法 结构 显示 了 使 用 封闭 类 型 标签 的 形式 。 大 多 数 标签 是 封闭 类 型 的 , 3 e y. 
它们 成 对 出 现 。 所 谓 成 对 ， 是 指 一 个 起 始 标签 总 是 搭配 一 个 结束 标签 ， 在 起 始 标签 的 标签 
名 前 加 上 符号 “/” 便 是 其 终止 标签 ， 如 《head> 与 /head>。 夹 在 起 始 标签 和 终止 标签 之 间 
的 内 容 受 标签 的 控制 。 

例如 : 《i> 网 页 设计 DIY<]i>，《i> 和 《Ai 之 间 的 “网 页 设计 DIY” 受 标签 1 的 控制 。 标 
俭 i 的 作用 是 将 所 控制 的 文本 内 容 显 示 为 糙 体 ， 所 以 在 浏览 器 中 看 到 的 “网 页 设计 DIY” 将 
AURA. 

如 果 一 个 应 该 封闭 的 标签 没有 结束 标签 , 则 可 能 产生 意 想 不 到 的 钳 误 , BED sa n] 
可 能 出 错 的 结果 也 不 同 。 例 如 ， 如 果 在 上 例 中 ， 没 有 以 标签 </i>》 结 束 对 文字 格式 的 设置 ， 
可 能 后 面 所 有 的 文学 都 会 以 斜体 学 的 格式 出 现 。 
注意 : 并 非 所 有 HTML 标签 都 必须 成 对 出 现 ， 本 书 第 6. 2. 3 节 将 介绍 这 种 非 封闭 类 型 的 标签 。 建 议 读者 在 
使 用 HTML 标签 时 ， 最 好 先 弄 清 标签 是 否 为 封闭 类 型 。 


[Lle.2.2 < 标签 属性 1= 参 数 1 属性 2= 参 数 2> 对 象 4/ 标 签 > 
这 种 语法 结构 是 上 一 种 语法 结构 的 扩展 形式 ， 利 用 属性 进一步 设置 对 象 的 外 驳 ， 而 参 
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数 则 是 设置 的 结果 。 

每 个 HTML 标 签 都 可 以 有 多 个 属性 ， 属 性 名 和 属性 值 间 是 用 “=” 连 接 ， 构 成 一 个 完整 
的 属性 ， 例 如 <body bgcolor=“#FF0000“> 表 示 将 网 页 背景 色 设 置 为 红色 。 多 个 属性 之 间 
用 空格 分 开 。 例 如 : 

<font face=“ 隶 书 ”size=“20 ^" color-" #FF0000“>》 爱 就 在 你 里 边 《/font> 

上 述 语句 表示 将 “ 爱 束 在 你 映 边 ”的 字体 设置 为 隶书 ， 了 字号 设置 为 20， 闫 色 设 置 为 红 
色 。 如 网 6-2 所 示 : 


Ll. 2. 3 “标签 > 


前 面 说 过 , HTML 标 签 并 非 都 成 对 出 现 。 而 这 种 不 成 对 出 现 的 标签 称 为 非 封 闭 类 型 标签 。 
在 HTML 语 言 中 ， 非 封闭 类 型 的 标签 不 多 ， 读 者 最 常见 的 应 该 是 换行 标签 <br>。 

例如 : 在 Dreamweaver CS5 的 代码 视图 的 body》 与 《</body>》 标 签 之 间 输 入 <font face- ^ 
3E- B" size- ^5" color-^8006600^» 313 7K i 3E 3E i [8] 8E YE Xbr? 158 389] A1 25 £8 *& [n] T- 38h 
&nbsp;X/font»,  fEi Wide ZUR UE6-39T « 


爱 就 在 你 身边 浪潮 却 渴望 重 回 土 地 


图 6-2 《font》 标 签 的 示例 效果 图 6-3 《br>》 标 签 的 示例 效果 


使 用 换行 标签 使 一 行文 学 在 中 间 换 行 ， 显 示 为 两 行 ， 但 结构 上 仍 属 于 同一 个 段落 。 


[Llo. 2.4 duos bom 


JU Br BHTMLARAS RE E —RUEXIZHA. bwRZ MIuDEHHEILEAE. JÉRHZTE 
杂 的 语法 。 例 如 ,如果 硕 望 将 一 行文 本 同时 设置 粗 体 和 和 斜体 格式 ， 则 可 以 采用 下 面 的 语句 : 

a D0 

在 浏览 器 中 的 显示 效果 如 图 6-4 所 示 ) 


六 时间 mta 
图 6-4 hu tief o pDXCR 图 6-5 Hihitntp at Ht DUCR 


HP EBORE AINE n HE SUA ERI RCM — REL EJ RC Ac 3e SL. MU RIBÉ 
会 出 现 不 可 预料 的 结果 。 例 如 ， 对 于 上 面 的 例子 ， 也 可 以 这 样 写 成 如 下 形式 : 

Go T EdrX/b»&/ 1> 

该 语句 在 浏览 器 中 的 显示 效果 如 图 6-5 所 示 。 但 是 ， 尽 量 不 要 写成 如 下 的 形式 : 

GT H dr 15b? 

上 面 的 语句 中 ， 标 签 航 和 套 友 生 了 错误 。 用 户 切 换 到 “设计 ” 视 见 ， 可 以 看 到 其 显示 效 
条 如 网 6-4 所 示 。 单 击 标签 为 黄色 的 文本 块 ， 在 属性 面板 中 可 以 看 到 相关 的 钳 误 提示 ， 提 
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示 用 户 这 是 一 个 无 效 的 标签 ， 因 为 这 是 一 个 交 迭 的 或 未 关闭 的 标签 。 如 图 6-6 所 示 。 
属性 
PEE M 标记 为 非法 因为 这 是 一 个 变法 的 或 未 关闭 的 标签。 
4o RIXCAESERE ERU FR RSS, PUSIER ERE, 


B® 


图 6-6 《br> 标 签 的 示例 效果 
尽管 这 个 错误 的 例子 在 大 多 数 浏览 器 中 可 以 被 正确 识别 。 但 是 对 于 其 他 的 一 些 标签 ， 
如 果 账 僚 发 生 错 误 的 话 ， 束 不 一 定 有 这 么 好 的 运气 了 了。 为 了 保证 文档 有 更 好 的 莱 容 性 ， 尺 
tg ANLE ERAS ESFERA e 


本 市 将 评 细 介绍 HTML 中 常用 的 一 些 标签 。 午 握 这 些 标签 的 用 法 ， 对 今后 的 网 页 制作 可 
以 起 到 事半功倍 的 效 琳 。 


[Lje. 3.1 文档 的 结构 标签 


在 Dreamweaver CS5 中 创建 了 一 个 HTML 文 档 后 ， 如 果 切 换 到 “代码 “视图 ， 用 户 会 发 

现 ， 尽 管 新 建文 档 的 设计 视图 是 空 日 的 ， 但 是 其 中 已 经 有 了 不 少 源 代 码 。 在 默认 状态 下 ， 
这 些 源 代码 如 下 : 

«!DOCTYPE html PUBLIC ^-//W3C//DTD XHTML 1.0 Transitional//EN 

"http://www. w3. org/ TR/xhtml 1/DTD/xhtml 1-transitional. dtd > 

<html xmlns= http://www. w3. org/1999/xhtml^» 

«head» 

«meta http-equiv- "Content-Type" content-" text/html; charset-utf-8^ 


12 
《title>?》 无 标题 文档 《</title> 
</head> 
<body> 
</body> 
</html> 


基本 HTML 页 面 以 DOCTYPE 开 始 ， 它 声明 文档 的 类 型 ， 量 它 之 前 不 能 有 任何 内 容 (包括 
换行 符 和 衬 格 ) ， 和 否则 将 使 文档 声明 无 效 。 

上 面 的 代码 包括 了 一 个 标准 的 HTML 文 件 应 该 具有 的 4 个 组 成 部 分 。 下 面 分 别 进行 简要 
介绍 。 

1. 《html1> 标 签 

《<html>…</html》 标 签 是 HTML 文 档 的 开始 和 结束 标签 ， 告 诉 浏览 器 这 是 整个 HTML 文 件 
的 范围 。 

HTML 文 档 中 所 有 的 内 容 都 应 该 在 这 两 个 标签 之 间 ， 一 个 HTL 文 档 非 注 释 代码 总 是 以 
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<html> 开 始 ， 以 /html> 结 束 的 。 

2. “head> 标 签 

<head>…</head> 标 签 一 般 位 于 文档 的 头 部 ， 用 于 包含 当前 文档 的 有 关 信 息 ， 例 如 标 
题 和 关键 学 等 ， 通 单 将 这 两 个 标签 之 间 的 内 容 统称 作 HIML 的 “ 头 部 ”。 

位 于 头 部 的 内 容 一 般 不 会 在 网 足 上 和 直接 显示 ， 而 是 通过 为 外 的 方式 起 作用 。 例 如 ， 在 
HTML 的 头 部 定义 的 标题 不 会 显示 在 网 页 上 ， 但 是 会 出 现在 网 页 的 标题 栏 上 。 

3. “title> 标 签 

《title> 和 </title>》 标 签 位 于 HTML 文 档 的 头 部 ， 即 位 于 Khead> 和 </head>》 标 签 之 间 ， 用 
于 定义 显示 在 浏览 器 窗口 左上 角 的 标题 栏 中 的 内 容 。 

4. 《body> 标 签 

《body>…“/body> 用 于 定义 HTML 文 档 的 正文 部 分 ， 例 如 文字 、 标 题 、 段 落 和 列表 等 ， 
也 可 以 用 来 定义 主页 背景 颜色 。《body>…/body> 定 义 在 /head> 标 签 之 后 ， 
《<html>…</html》 标 签 之 间 。 所 有 出 现在 网 页 上 的 正文 内 容 都 应 该 写 在 这 两 个 标签 之 间 。 

<body> 标 签 有 6 个 着用 的 可 选 必 性， 主要 用 于 控制 文档 的 基本 特征 ， 如 文本 、 和 背景 两 
色 等 。 各 个 属性 介绍 如 下 : 
background: 该 属性 用 于 为 文档 指定 一 幅 图 像 作为 背景 。 
text: 该 属性 用 于 定义 文档 中 非 链接 文本 的 献 认 闫 色 。 
link: 该 属性 用 于 定义 文档 中 一 个 未 家 访问 过 的 超级 链接 的 文本 颜色 。 
alink: 该 属性 用 于 定义 文档 中 一 个 正在 打开 的 超级 链接 的 文本 闫 色 。 
vlink: 该 属性 用 于 定义 文档 中 一 个 已 经 被 访问 过 的 超级 链接 的 文本 颜色 。 

€  bgcolor: 该 属性 定义 网 页 的 育 景 颜色 。 

例如 ， 如 末 和 希望 将 文档 的 背景 图 像 设 置 为 主 目录 下 的 001. jpg， 文 本 磊 色 设置 为 黑色 ， 
未 访问 超级 链接 的 文本 颜色 设置 为 绿色 ， 已 访问 超级 链接 的 文本 颜色 设置 为 红色 ， 正 在 访 
问 的 超级 链接 的 文本 两 色 设置 为 监 色 ， 则 可 以 使 用 如 下 的 body> 标 签 : 

«body background = ^file:///C|/Inetpub/wwwroot/001.gif^ text = “black” link 


= "green" alink = “blue” vlink = “red’> 


一 


在 负面 中 输入 文本 ， 并 创建 超级 链接 后 的 页 面 预 宽 效 果 如 图 6-7 所 示 。 


| 未 访问 的 链接 
链接 二 


已 访问 的 性 接 DO RT. 
Eu 正在 访问 的 性 接 


图 6-7 «body» ENSE EJ zi PICS 


其 中 ,页 面 背 景 图 像 为 C:\Inetpub\wwwroot\001. gif; “body 标 签 示 例 ” 为 普通 文本 ， 
显示 为 墨色; “链接 一 ”为 未 访问 过 的 链接 ， 显 示 为 绿色 ; “链接 二 ”为 已 访问 过 的 链接 ， 
显示 为 红色 ; “链接 三 ”为 正在 访问 的 链接 ， 显 示 为 蓝 


81 


Dreamweaver CS5 中 文 版 标准 实例 教程 


[L]e.3. 2 注释 标签 


HTML 的 客户 问 注 释 标签 为 <! 一 … 一 >， 在 这 个 标签 内 的 文本 都 不 会 在 浏览 疙 器 窗口 中 显 
示 出 来 ， 一 般 将 客户 闪 的 脚本 程序 段 放 在 此 标签 中 ， 对 于 不 文 持 该 脚本 语言 的 浏览 器 也 可 
隐藏 程 序 代 人 码 。 

例如 ， 在 上 例 中 ， 将 “链接 三 ”标签 为 注释 文本 的 语句 如 下 : 

《1 — 《p>Ka href-" index. html1”) 链 接 三 《/a>《/p>》--> 
在 Dreamweaver CS5 的 “代码 ”视图 中 ， 注 释 内 容 显 示 为 灰色 ， 如 图 6-8 所 示 。 


<p>hbods 慰 记 示 例 = m 
<p><a href-"123.htnl"28ETE— — /a-c/p 
Zp2za href-"conn.aspx" 28k c /amc/p» 


l6-8 注释 标签 示例 效 末 


修改 后 的 文件 在 浏览 占 中 的 预 宽 效 果 如 图 6-9 所 示 。 


body 标 记 示例 


图 6-9 注释 标签 示例 效 末 


对 比 独 6-6 可 以 看 出 ， 衫 注释 的 文本 不 会 在 浏览 亏 中 显示 。 但 是 ， 如 宋 是 服务 融 咒 程 
序 代 人 码 ， 即 使 在 这 个 注释 标签 内 也 会 锐 执 行 


[Lle. 3. 3 文本 格式 标签 


文本 格式 标签 用 于 控制 网 页 中 文本 的 样式 ， 如 大 小 、 字 体 、 段 洛 样式 等 。 
1. 《font》 标 签 
<font 》.. .</font> 标签 用 于 设置 文本 字体 格式 ， 包 括 字体 、 字 号 、 颜 色 、 字 型 等 
适当 地 应 用 可 以 使 页 面 更 加 美观 。 
font 标 签 有 3 个 属性 : face、color 和 size。 这 3 个 属性 可 以 日 由 组 合 ， 没 有 先后 顺序 。 
通过 设置 这 3 个 标签 属性 ， 可 以 控制 文学 的 显示 效果 。 
@ face: 用 于 设置 文本 字体 名 称 , 可 以 用 喜气 隅 开 多 个 字体 名 称 。 例 如 :《font face 
"Times New Roman, Times, serif^/»Happy New Year</font>。 
e Size: HT XEXAFEMAAO. BugBYSEIE-T 到 7 之 间 ， 数 字 越 大 字体 越 大 。 
e Color: 用 于 设置 文本 闫 色 ， 可 以 用 red. white 和 green 等 助 记 符 ， 也 可 以 用 16 
进 制 数 表 示 ， 如 红色 为 “#FF0000”。 
使 用 示例 : 
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《<font face= 华文 彩云 ”size= T color» black > 欢迎 光临 </font》 


上 述 语 句 在 浏览 右 中 的 显示 效 末 如 图 6-10 所 示 : 
CASU RES 


图 6-10 font 标签 示例 效果 


2. «b». Xi». Xem. CXhtbbRAS 

@ “hb>…“/b> 标 签 将 标签 之 间 的 文本 设置 成 粗 体 。 

例如 : Dreamweaver<b>DIY</b> 教 程 ， 在 浏览 器 中 的 了 预览 效果 如 图 6-11 所 示 。 
e “iji>…</i> 标 签 将 标签 之 间 的 文本 设置 成 糙 体 。 

例如 : 请 看 <i> 这 边 ! Ci 


@ 《enm>…“/em> 标 签 用 于 将 标签 之 间 的 文字 加 以 强调 。 不 同 的 浏览 句 效 末 有 所 不 同 ， 
通 第 会 设置 成 糙 体 。 

例如 :今天 《em> 堆 下 《]em2> 五 度 ! 

上 述 三 个 例子 在 浏览 器 中 的 显示 效果 如 图 6-12 所 示 。 

这 是 一 级 标题 

这 是 二 级 标题 

这 是 三 级 标题 


DrearmweaverDIY 雪 程 


Es au 


这 是 四 级 标题 
这 是 五 级 标题 
这 是 六 级 标题 


今天 村 了 芋 度 | 


图 6-11 标签 示例 效果 图 6-12 Rh# 标 签 示例 效 朱 


€ (hio ... X/ht^ Gt-1, 2, 3, 4, 5, 6) 标签 用 于 设 标题 字体 (leader) ， 有 1 
到 6 级 标题 ， 数 字 越 大 字体 越 小 。 标 题 将 显示 为 黑体 字 。《h#> 一 一 《7/R#> 标 签 目 动 
插入 一 个 空 行 ， 不 必用 《p> 标签 再 加 空 行 。 和 <title> 标 签 不 一 样 ，《<h#> 标 签 里 的 
文本 显示 在 浏览 器 中 。 使 用 示例 : 

《<h1> 这 是 一 级 标题 《/h1> 
《<h2) 这 是 二 级 标题 《</h2> 
《<h3> 这 是 三 级 标题 </h3> 
《<h4> 这 是 四 级 标题 </h4> 
《<h5> 这 是 五 级 标题 《</h5> 
《<h6> 这 是 六 级 标题 《</h6> 

显示 效果 如 图 6-11 所 示 。 

3. 《s>、《big>、《smal1>、《u> 标 签 

@ 《s>…《/s»》 标 签 为 标签 之 间 的 文本 加 删除 线 〈( 即 在 文本 中 间 加 一 条 模 线 )。 

例如 : 《s? 删 际 这 一 行 </s> 

@ “big>…“/big> 标 签 将 使 用 比 当 前 页 面 使 用 的 字体 更 大 的 字体 显示 标签 之 间 的 文 
A. 

例如 : 《font size-3»f&pi3E big RE|X/big»iise! X/font» 
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€ 《snmal1>…“/smal1> 标 签 将 使 用 比 当前 页 面 使 用 的 字体 更 小 的 字体 显示 标签 之 间 
的 文本 。 
例如 : 字体 《< small > 小 一 些 4/ small > 更 好 ! 
e 《<u>…《/ 收 标签 为 标签 之 间 的 文本 加 下 划 线 。 
例如 : 今天 <u> 天 和气/u> 真 好 ! 
上 述 四 个 例子 在 浏览 器 中 了 预览 的 效果 如 图 6-13 所 示 : 


— 
看 起 来 特别 漂亮 | 


再 别 康桥 
字体 小 一 些 更 好 | 
今天 天 气 真 好 | 有 冉 别 康桥 
图 6-13 ”标签 示例 效果 图 6-14 pre 标签 示例 效果 


4. 《<pre>》 预 格式 化 标签 
默认 情况 下 ，Dreamweavetr 会 将 两 个 字符 之 间 的 多 个 空格 蔡 换 为 一 个 空格 ， 然 后 在 浏 
览 器 中 显示 。《pre>…“《/pre> 标 签 用 于 设 定 浏览 器 在 输出 时 ， 对 标签 内 部 的 内 容 儿 乎 不 做 
修改 地 输出 。 
例如 ， 在 Dreamweaver 的 代 但 视 独 中 输入 以 下 代码 : 
Kpre? 8l 康桥 《</pre> 
Be] ”康桥 
该 示例 在 浏览 器 中 的 显示 效果 如 图 6-14 所 示 。 


[je. 3. 4 排版 标签 


《br>、《p>、《hr> 标 签 

e 《br》 标 签 用 于 在 文本 中 添加 一 个 换行 从 ， 它 不 需要 成 对 使 用 。 
例如 : 在 这 里 换行 br> 第 二 行 ! 

e “p>…“/p> 标 签 用 来 分 隅 文档 的 多 个 段 洲 。 可 选 属性 “align” 有 三 个 取 值 分 别 介 
绍 如 下 : 

e left: 上 段落 左 对 齐 

€ center: 段 洛 抽 中 对 齐 

€ color: 段 洛 右 对 齐 

例如 :《 p align=center》 居 中 对 齐 《</ p» 

e 《hr》 标 签 用 于 在 页 面 中 洪 加 一 条 水 平 线 。 

例如 : 水平线 上 <hr>》 水 平 线 下 ! 

上 述 三 个 例子 在 浏览 器 中 的 显示 效果 如 图 6-15 所 示 : 

2. 《left>、《fright>、《center> 标 签 

€ 《center>…《/center》 标 签 将 标签 之 间 的 文本 等 元 素 居 中 显示 。 

例如 : 左 <center》 居 中 </center) 磊 

e “left>…“/Left> 标 签 将 标签 之 间 的 文本 等 元 素 居 左 显示 。 


— 
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例如 : 《left>》 左 对 齐 《</1left> 

@ “Tight>…</right> 标 签 将 标签 之 间 的 文本 等 元 素 居 右 显示 。 
使 用 示例 : 右 <right 3 右 对 齐 </ right> 碳 

3. 《sub> 和 《sup> 标 签 

€ 《sub>…“/sub> 标 签 将 标签 之 间 的 文本 设置 成 下 标 。 

例如 : 123 是 下 标 《sub>123</sub> 

@ 《sup>…《/sup》 标 签 将 标签 之 间 的 文本 设置 成 上 标 。 

例如 : 456 是 上 标 《sup>》456</sup>》 

eA T. 览 融 中 的 显示 效果 如 网 6-16 所 示 。 


123 是 下 标 ,,， 


4564 Epg 
图 6-15 ”标签 示例 效果 图 6-16 ”标签 示例 效果 


4. 《div> 和 《span> 标 签 
e “div > ...《/div?》 用 于 块 级 区 域 的 格式 化 显示 。 访 标签 可 以 把 文档 划分 为 大 干 
部 分 ， 并 分 别 设置 不 | 司 的 属性 值 ， 使 同一 文学 区 域内 的 文学 显示 不 同 的 效果 。 营 
用 于 设置 CSS 样式 。 
其 党 用 格式 如 下 : 
«div align = 对 齐 方式 id = 名 称 style = 样式 class = 类 名 nowrap>》*…《/div》 
其 中 ， 对 齐 方式 可 以 为 center、1left 和 right; id 用 于 定义 本 div 区 域 的 名 称 ， 用 在 动 
态 网 页 编程 中 ; style 用 于 定义 样式 ，class 用 于 赋予 类 名 ; nowrap 说 明 不 能 折 行 ， 默认 是 
不 加 nowrap， 也 束 古 可 以 折 行 。 
例如 : 
<div? 第 一 段 文 本 ， 上 默认 左 对 章 显示 《</div> 
«div align = center style = "color: purple" id =“another > 
"B EXON, OCEBAOUAERGA,. HJ. 
</div> 
上 例 在 浏览 器 中 的 显示 效果 如 图 6-17 所 示 。 
第 一 段 文 本 ， 软 认 左 对 齐 显 丰 


M DET T—BOUR, UPEREUUEB, HEWEER. Doom 


Kl6-17 Div 标 和 俭 示 例 效 果 


€ 《span>…“/span> 用 于 定义 内 蒋 的 文本 容 吉 或 区 瑾 ， 主 要 用 于 一 个 段 钞 、 句 子 长 
至 单词 中 。 其 格式 为 : 
《<span id = 名 称 style = 样式 class = 类 名 >》…… 《</span> 
<span》 标签 没有 align 属 性 ， 其 他 属性 的 意义 和 <div?》 标 签 类 似 ， 不 再 资 述 。《<span?》 标 
答 同 样 在 样式 表 的 应 用 方面 特别 有 用 ， 它 们 都 用 于 动态 HTML。 
例如 : 《span style =“color: red; font-size: 18pt >18 点 大 小 的 红色 字体 人 ]/span> 
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Div 标 签 和 span 标 签 的 区 别 在 于 ，div 是 一 个 块 级 元 素 ， 可 以 包 仿 段落、 标题、 表格 ， 
旋 人 至 诸如 章节 、 摘 要 和 备注 等 。 而 span 是 行内 元 素 ，span 的 前 后 是 不 会 换行 的 ， 它 纯粹 是 
应 用 样式 。 下 面 以 一 个 实例 来 说 明 这 两 个 属性 的 区 别 。 

CI) 新 建 一 个 HTIML 文 档 ， 并 设置 文档 的 背景 图 像 。 

(2) 切换 到 “代码 ”视图 ， 在 body> 和 </body》 标 签 之 间 输 入 以 下 代码 : 

《span》 第 一 个 span</span》 


AR I 


<span »*58 —"spanC/span? 
《span 第 三 个 span</ span》 


《di 第 二 小 die dwr> 
Xdiv?38 —" divC/div» 
<div》 第 三 个 div</div> 
(3) 你 存 文件 ， 切 换 到 “设计 ”视图 ， 可 以 合 看 负面 效 末 ， 如 图 6-18 所 示 。 


审 一 个 span Bo lspan Bo spans 000000000 
第 一 个 dir : 


图 6-18 Div 和 span 标 签 比较 示例 效果 


[I]e. 3.5 列表 标签 


1. 无 序列 表 

所 谓 无 序列 表 ， 是 指 列表 项 之 间 没 先后 次 友之 分 。<u1>…《/u1》 用 来 标签 无 序列 表 的 
开始 和 结束 。 其 标签 格式 为 :<u1>《<1i>》... ub». 其 中 每 一 个 <1》 标签 表示 一 个 列表 项 值 。 

例如 : 


<ul> 
《1i> 网 页 制作 
n dud 2 程序 设计 ”“， 程序 设计 
《1i》 网 络 管理 3. 网络 管理 ， poji Es B 
«ul» 
上 例 在 浏览 器 中 的 显示 效果 如 图 6-19 所 示 。 图 6-19 无 序列 表 和 有 序列 表 的 效果 
2. 有 序列 表 


有 序列 表 与 普通 列表 不 同 之 处 在 于 有 序列 表 存 在 序号 。《o1>…“/ol> 用 于 标签 有 序列 
表 的 开始 和 结束 。 有 序列 表 有 一 个 属性 “type”， 其 值 的 功能 介绍 如 下 : 

€ type=1: 表示 用 数字 给 列表 项 编号 ， 这 是 默认 设置 。 

€ type=a: 表示 用 小 写 学 母 给 列表 项 编号 。 

€  type-A: 表示 用 大 与 字母 给 列表 项 编号 。 

€ type=i: 表示 用 小 写 罗马 字母 给 列表 项 编写 。 
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@ type-I: 表示 用 大 写 罗马 字母 给 列表 项 编写 。 
例如 : 
Xol» 
《1i> 网 页 制作 
《1i》 程 序 设计 
《1i> 网 络 管理 
《/ol> 
该 示例 在 浏览 右 中 的 显示 效果 如 图 6-19 右 图 所 示 。 
3. 普通 列表 
普通 列表 通过 <dl>Kdt>》... <dd>...《/dl》 的 形式 实现 ， 通 常用 于 排版 。 其 中 ， 
《<dl>…《/d1》 标 签 用 于 创建 一 个 普通 的 列表 ; 《dt>…</dt> 用 于 创建 列表 中 的 上 层 项 目 ; 
《dd>…“ /dd> 用 于 创建 列表 中 最 下 层 的 项 目 。《 dt>》…< /dt> 和 < dd»--« /dd> 都 必须 放 在 
€ dl>…“ /dl> 标 志 对 之 间 。 


如 下 实例 : 
Cb 
“dt> 网 页 制作 
<dd>FLASH 
<dd>FIREWORK 网 页 制作 
FLASH 
《dt> 程 序 设计 FIREWORK 
<dd>JAVASCRIPT au S 
«dd» VBSCRIPT VBSCRIPT 
Qdl» 
上 述 代码 在 浏览 器 中 的 显示 效果 如 图 6-20 所 示 。 图 6-20 ”普通 列表 效果 


[le. 3.6 表格 标签 


通过 表格 可 以 将 数据 内 容 分 门 别 类 地 显示 出 来 ， 从 而 使 网 页 显得 整齐 美观 。 在 HTML 中 
制作 表格 是 一 件 很 容易 的 事 。 

1. 《table> 标 签 

表格 由 <table>…“《/table> 标 签 构 成 。《table> 标 签 还 有 很 多 属性 用 于 控制 表格 的 显示 
效果 。 表 格 的 常用 参数 分 别 介绍 如 下 : 

€ align: 设置 表格 与 页 面 对 齐 方式 ， 取 值 有 left、center 和 Tight。 

€ cellpadding: 设置 表格 的 一 个 单元 格 内 数据 和 单元 格 边 框 间 的 边 距 ， 以 像素 为 

单位 。 

€ cellspacing: 设置 单元 格 之 则 的 间距 ， 以 像素 为 单位 。 

《<table>…《/table> 用 于 标志 表格 的 开始 和 结束 。 表 格 的 常用 参数 分 别 介 绍 如 下 : 

€ background: 设置 表格 的 背景 图 像 。 

€ bgcolor: 设置 表格 的 背景 颜色 。 

€ border: 设置 表格 的 边框 。 如 果 不 设置 该 属性 ， 或 将 该 属性 的 值 设置 为 0， 则 表 
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示 不 显示 表格 的 边框 线 。 
width: 设置 表格 的 宽度 ， 单 位 默认 为 像 象 素 ， 也 以 使 用 百分比 形式 。 
height: 设置 表格 的 高 度 ， 单 位 默认 为 像素 ， 也 以 使 用 百分比 形式 。 


例如 ， 下 面 的 代码 绘制 了 一 个 宽 为 300 像 素 、 边 框 为 1、 背 景色 为 果 绿 色 、 边 距 均 为 2、 
3 行 3 列 的 表格 。 
«table width-^300^ border-"1" cellspacing- 2”cellpadding= 2 > 


SUI? 
《td bgcolor-^899CC33^»&nbsp;X/td» 
《td bgcolor-^899CC33^»&nbsp;X/td» 
《td bgcolor-^899CC33^»&nbsp;X/td» 
C br? 
SUIT 
《td bgcolor-^899CC33^»&nbsp;X/td» 
《td bgcolor-^899CC33^»&nbsp;X/td» 
《td bgcolor-^899CC33^»&nbsp;X/td» 
< > 
SUYA 
《td bgcolor-^899CC33^»&nbsp;X/td» 
《td bgcolor-^899CC33^»&nbsp;/td» 
《td bgcolor= #99CC33” >&nbsp; </td> 
Ur? 


X/table» 
上 述 代 码 在 浏览 器 中 的 显示 效果 如 图 6-21 所 示 。 


2. 


<tr>、《td> 和 《th> 标 签 
《tr>…《/tr》 标 签 用 于 标志 表格 一 行 的 开始 和 结束 。 


<tr> 的 常用 参数 分 别 介绍 如 下 ; 


align: 设置 行 中 文本 在 单元 格 内 的 对 齐 方式 ， 取 值 有 left、center 和 Tight。 
background: 设置 行 中 单元 格 的 背景 图 像 。 

bgcolor: 设置 行 中 单元 格 的 背景 闫 色 。 

<td>…k/td> 用 于 标志 表格 内 单元 格 的 开始 和 结束 。<td》 标 答应 位 于 <tr> 标 签 内 


部 。 


《td>》 的 常用 参数 分 别 介绍 如 下 : 


align: 设置 行内 容 在 单元 格 内 的 对 齐 方式 ， 取 值 有 left、center 和 right. 
background: 设置 单元 格 的 背景 图 像 。 

bgcolor: 设置 单元 格 的 背景 颜色 。 

width: 设置 单元 格 的 宽度 ， 单 位 为 像素 。 

height: 设置 单元 格 的 高 度 ， 单 位 为 像素 。 
<th>…</th> 的 作用 与 td> 大 致 相同 ， 主 要 用 于 标志 表格 内 表 头 的 开始 和 续 
且 其 中 的 文本 目 动 以 粗 体 显 示 。 
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“th> 标 签 的 利用 属性 如 下 : 
€ colspan: 设置 《th>…<《/th> 内 的 内 容 应 该 跨越 几 列 。 
€  rowspan: 设置 《th>》…《/th>》> 内 的 内 容 应 该 跨越 几 行 。 
3. 《colspan》 和 <rowspan》 标 签 
《colspan> 和 《rowspan> 标 签 用 于 合并 单元 格 ， 分 别 表 示 路 多 列 合并 和 路 多 行 合并 。 例 
如 ， 下 面 的 代码 : 
《table width-^ 300^ border-^1^ align-" center" cellpadding-" 2^ 
cellspacing- 2^» 
《<tr> 
«th width-^83" scope-"col' > 名 称 《</th> 
《th colspan= 2" scope- col > 参数 人]th> 
“7 CE 
《tr> 
<td>123</td> 
《td width= 119^ >qwe</td> 
<td width= 70 >zxc</td> 
STU? 
Ctr» 
<td>456</td> 
<td>asd</td> 
<td>fgh</td> 
UE, 
«</table> 
该 表格 包含 3 行 3 列 ， 第 一 行 设置 了 跨 两 列 的 合并 形式 。 访 表格 在 浏览 右 中 的 效果 如 图 
6-22 上 所 示 。 


图 6-21 “table> 标 签 示 例 效 果 图 6-22 ”表格 合并 列 的 效果 


[je. 3.7 框架 标签 


框架 将 网 页 页 面 分 成 儿 个 窗口 ， 旦 不同 的 窗口 可 链接 不 同 的 URL。 mo 
框架 标签 要 放 在 一 个 总 的 html 文 档 中 ， 这 个 文档 只 记录 了 该 框架 是 如 何 划分 的 ， 而 不 会 
示 任 何其 他 的 资料 ， 所 以 不 必 放 入 人 body> 标 签 中 。 在 浏览 器 中 预览 框架 页 面 时 ， 必 和 弓 itu 
取 这 个 html 文 档 。 

1. 《frameset> 标 签 

《frameset>...《/frameset》 标 签 用 于 在 页 面 中 创建 可 以 在 同一 浏览 器 窗口 中 显示 多 
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个 网 页 的 区 域 。《frameset> 标 签 在 多 窗口 页 面 中 的 地 位 就 相当 于 《body> 在 普通 单 窗 口 页 面 
中 的 地 位 ， 在 页 面 中 用 <frameset>…</frameset》 标 志 页 面 主体 部 分 的 起 止 位 置 。 同 时 ， 
《frameset》 标 签 决定 了 如 何 划 分 窗口 ， 以 及 每 个 窗口 的 位 置 和 大 小 。 
《frameset>...《/frameset》 标 签 常 用 的 属性 介绍 如 下 : 
rows: 用 于 分 割 上 下 窗口 ， 大 小 用 占 窗口 蚤 度 的 百分比 ， 或 像 系 值 表 示 。 
cols: 用 于 分 割 左 右 窗 口 ， 大 小 用 占 窗口 宽度 的 百分比 ， 或 像素 值 表示 。 
frameborder: 用 于 设置 框 和 保 是 否 有 边框 ， 取 值 为 yes 或 no. 
border: 用 于 设置 框架 边框 的 厚度 。 
Framespacing: 设 定 框 染 与 框架 间 的 保留 空 日 的 距离 ， 责 认 值 是 0。 
第 见 框架 子 窗口 的 划分 方式 有 两 种 ， 百分比 划 分 方式 和 像素 值 划 分 方式 。 用 百分比 方 
式 划 分 时 ， 将 框架 的 各 子 域 按 其 占 上 一 级 父 区 域 大 小 的 百分比 来 划分 。 例 如 下 面 的 例子 : 
Xframeset rows=30%, 米 > 
(frame src-^"Acol.html^ frameborder=1> 
Xframeset cols=30%, 米 > 


«frame Srfrc= Bcol.html" frameborder-0» 


frame src-^"Ccol.html^ frameborder-0» 

(/frameset? 

C(/frameset? 

上 和 面 的 代 人 码 表 示 将 窗口 划分 为 上 下 两 部 分 ， 上 部 分 占 整 个 窗口 口上 度 的 30%， 下 部 分 点 
整个 窗口 遍 度 的 70%。 然 后 将 下 部 分 的 窗口 分 为 左右 两 个 子 窗口 ， 左 右 子 窗口 分 别 占 下 窗 
口 宽度 的 30% 和 70%。 如 图 6-23 所 示 。 

按 像 双人 和 值 大 小 划分 框架 时 ,框架 中 的 各 子 区 域 按 照 指定 的 像素 值 来 设 定 各 子 区 域 窗口 
的 大 小 。 例 如 下 面 的 代码 : 

Xframeset rows-60, 600» 

(frame src= Acol.html" frameborder-1» 

Xframeset cols=80, *> 


<frame src-"Bcol.html^ frameborder=0> 


<frame src=’ Ccol.html” frameborder=0> 

</frameset> 

</frameset> 

上 而 的 代码 先 将 窗口 分 为 上 下 两 部 分 ， 上 窗口 的 高 度 为 60 像 素 ， 下 窗口 的 高 度 为 600 
像素 ， 然 后 将 下 窗口 分 为 左右 两 个 子 窗口 ， 左 子 窗口 的 宽度 为 80 像 素 ， 其 他 的 部 分 为 右 子 
窗口 。 

2. 《frame> 标 签 

用 “frameset> 标 签 把 窗口 分 割 好 后 ， 各 子 窗口 的 属性 用 HTML 的 frame> 标 签 来 定义 ， 
所 以 Xframeset?》 标 签 中 必须 包含 《frame》 标 签 ， 用 以 定义 各 子 窗 口 的 属性 。 

《frame> ... 《/frame》 标 签 的 常用 属性 介绍 如 下 : 

€ nane: 用 于 设置 框 染 名 称 。 

€ scrolling: 用 于 设置 框 染 是 侍 有 深 动 条 ， 取 从 为 yes 有 深 动 条 ， 取 值 为 no 则 没 
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HRS. BUB auto WM use H AUR. BAS auto. 
e src: 用 于 指定 该 框 染 的 HTML S ULIBISCTE, rA CECI REA ALICE V3 Ee 


^5. UntitledFrame-1 (XHTML) QA 


body? (k]?y Q 100  «JarxTi-1K/1$ 


图 6-23 按 百 分 比划 分 窗口 的 效果 


通过 设置 每 个 子 区 域 的 src 属 性 值 ， 可 以 在 不 同 的 子 窗口 中 打开 不 同 的 页 面 。 例 如 下 
面 的 代码 : 


《frameset rows-^59,:*^ cols-^*^ frameborder-" no^ border= 0” framespacing= 0^» 


Xframe src-^top.html/ name-^topFrame" frameborder-"yes^ scrolling-"No^ 
noresize-"noresize" id-"topFrame title-"topFrame" /> 
Xframeset cols=”80,*” frameborder-" no border=’0” framespacing- 0^» 
(frame src-^ change. html^ name= leftFrame” frameborder-" yes" 
scrolling-"No^ noresize-"noresize" id-"leftFrame" title-"leftFrame" /> 
(frame src-^sici. html" name-^mainFrame"^ frameborder-" yes" 
scrolling-"yes^ id= mainFrame” title-^"mainFrame" /> 
C(/frameset? 
C/frameset? 
上 述 代码 将 窒 口 进行 划分 后 ,分别 为 每 个 子 窗口 命名 ,并 链接 相应 的 页 面 文件 。 此 外 ， 
还 为 右 下 的 子 窗口 设置 了 该 动 条 。 最 终 效 来 如 图 6-24 所 示 。 


77. €'unetpub vwwroot MER i! heend (Orr )* oOoQ 
25 E [I [6 S cr 00 Ta THO E 


vr : 
t Y 2 "A 7 P4 : 


观 书 有 感 


天 光 云 影 共 徘徊 


| 半 亩 方 塘 一 览 开 


—— D — » 三 
o-TxXiv1kK/i* 


图 6-24 ”框架 效 来 


3. 《noframe》 标 签 
《noframe>…《/noframe》 标 签 用 于 设置 当 浏 览 器 不 支持 框架 技术 时 显示 的 文本 。 通 党 
的 做 法 是 在 此 标签 之 则 放置 提示 用 户 浏览 絮 不 支持 框架 的 信息 。 例 如 下 面 的 代 仅 : 


Xframeset rows=30%, 米 > 
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(frame src= Acol.htm1”framneborder=l> 
Xframeset cols=30%, 米 > 
(frame Src= Bcol.html”frameborder=0> 
frame src-"Ccol.html^ frameborder-0» 
noframe》 对 不 起 ， 您 的 浏览 右 不 支持 框架 。</noframe> 
</frameset> 
</frameset> 
上 面 的 代码 首先 划分 了 窗口 , 如 下 用 户 的 浏览 玫 不 支持 框架 技术 , 则 用 户 看 到 的 是 “对 
不 起 ， 您 的 浏览 器 不 文 持 框 架 ”。 
4. 《iframe> 标 签 
«frame > ...《/iframe> 标签 用 于 在 网 页 中 设置 浮动 帧 网 页 。 常 用 的 主要 属性 有 src 
和 name 属 性 。 其 中 属性 src 用 于 设置 浮动 帧 的 初始 页 面 的 URL。name 属 性 用 于 设置 浮动 帆 窗 
口 的 标识 名 称 。 如 下 实例 : 


<iframe src=”yulinling.html” name= window > 


Here is a Floating Frame 

(/iframe? 

<br><br> 

Xa href-"dingfengbo.html^ target- window YLoad A</A><BR> 

Xa href-"hechongtian.html" target-^window »Load BX</A><BR> 

Xa href-^yebanle.html" target-^ window »Load CX/A»«BR» 

如 果 用 户 的 浏览 器 不 文 持 框架 技术 , 则 显示 《iframe>…</ifrane> 标 签 间 的 文学 “Here 
is aFloating Frame”; 如 果 支 持 ， 则 显示 <iframe》 标 签 的 src 属 性 指定 的 页 面 。 点 击 Load 
A、Load B 或 Load C 文 字 链 接 ， 则 在 浮动 帧 区 域 中 显示 相应 的 链接 文件 。 如 图 6-25 所 示 。 
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图 6-25 iframe 标签 示例 效果 


[L]e.3. 8 表单 标签 


表单 是 HTML 文 档 中 用 于 加 用 户 显 示 信 息 ， 同 时 获取 用 户 输入 信息 的 界面 。 当 数据 输入 
完毕 后 ， 单 击 “ 提 交 ” 按 钮 ， 即 可 将 表单 内 的 数据 提交 a 到 服务 占 ， 服 务 占 问 根 据 输 入 的 数 
据 做 相应 的 处 理 。 表 单 的 应 用 相当 广泛 ， 登 录 注 册 、 网 上 查询 等 功能 都 离 不 开 表 蛙 。 

表单 中 有 多 种 表单 控件 对 象 ， 如 文本 框 、 复 选 枉 、 单 选 按钮 等 。 每 个 表单 以 form> 标 
签 开 始 ， 以 《</form> 结束 ， 表 单 中 的 各 种 表单 对 象 都 要 放 在 这 两 个 标签 之 则 。 

1. 《form> 标 签 
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<form>…<V/form> 标 签 用 于 表示 一 个 表单 的 开始 与 结束 ， 并 且 通 知 服务 器 处 理 表单 的 
内 容 。 其 参数 分 别 介 绍 如 下 : 
€ name: 用 于 指定 表单 的 名 称 。 
€ action: 指定 提交 表单 后 ， 将 对 表单 进行 外 理 的 文件 路 径 及 名 称 〈 即 URL) 。 
€ method: 用 于 指定 发 送 表单 信息 的 方式 ， 有 GET 方式 〈 通 过 URL 发 送 表单 信息 ) 
和 POST 方式 (通过 HTTP 发 送 表 单 信息 ) 。P0ST 方式 适合 传递 大 量 数据 ， 但 速度 
较 慢 ; GET 方式 适合 传送 少量 数据 ， 但 速度 快 。 
2. “input> 标 签 
《input> 标 签 用 于 在 表单 内 放置 表单 对 象 。 此 标签 不 需 成 对 使 用 。 它 有 一 个 type 属 性 ， 
对 于 不 同 的 type 属 性 值 , 《input> 标 签 有 不 同 的 属性 。 例 如 ， 当 type=text〈 文 本 域 表 单 对 
象 ， 在 文本 框 中 显示 文字 ) 或 type=password〔 密 人 码 域 表 单 对 象 ， 在 文本 框 中 显示 * 号 代替 
输入 的 文字 ， 起 保密 作用 〉 时 <input》 标 签 的 属性 如 下 : 
€ size: 文本 框 在 浏览 器 的 显示 宽度 , 实际 能 输入 的 字符 数 由 maxlength 参数 决定 。 
€  naxlength: 在 文本 杠 最 多 能 输入 的 字符 数 。 
当 type=submit (提交 按钮 ， 用 于 提交 表单 ) 或 type=reset COR EHEHL Hb Td 
单 中 用 户 已 输入 的 内 容 ) 时 <input》 标 签 的 属性 如 下 : 
@ value: 在 按钮 上 显示 的 标签 。 
当 type=radio《〈 单 选 钮 ) 或 type=checkbox〈 复 选 钮 ) 时 《input> 标 签 参数 介绍 如 下 : 
@ value: 用 于 设 定单 选 钮 或 复 选 钮 的 值 。 
€ checked: 可 选 参数 , 各 市 有 该 参数 , 则 默认 状态 下 该 按钮 是 选中 的 。 同 一 组 radio 
单 选 钮 (name 属性 相同 ) 中 最 多 上 只 能 有 一 个 单 选 钮 市 checked 属性 。 复 选 钮 则 无 
此 限制 。 
当 type=image《〈 图 像 ) 时 <input> 标 签 参数 介绍 如 下 : 
e src: 图 像 文件 的 名 称 。 
e alt: 网 像 无 法 显示 时 的 符 代 文本 。 
@ align: 图 像 对 象 的 对 齐 方式 ， 取 值 可 以 是 top、left、bottom、middle 和 Tight。 
下 面 通过 一 段 简 单 的 HTML 代 码 演 示 《input> 标 签 的 使 用 方法 。 人 代码 如 下 : 
<form action-login action. jsp method=POST> 
姓名 : 《<input type-text name= 姓 名 size-16»«br» 
密码 : 《input type-password name= 密 但 size=16><br> 


性 别 : 《input name= fradiobutton”type= radio”value= radiobutton > 


5 
«input name-^radiobutton" type-^radio" value-^ radiobutton > 女 Cbr> 
爱好 : 《input type-" checkbox name-^checkbox/ value-" checkbox > 运动 
«input type-" checkbox name-^"checkbox2" value-" checkbox > 音乐 <br> 
图 像 : 《input name= imageField type= image" src-"dd.gif^ width= 16” 
height= 16”border= 0 ><br> 
《input type-submit value= 发送 “><input type-reset value= mi» 
</form> 
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上 述 代码 在 浏览 器 中 的 显示 效果 如 图 6-26 所 示 : 


姓名 : 
密码 : 

性 别 ， 握 男 Ox 
ES. Las 回音 乐 


[发 送 ] | 重 设 | 


Kl6-26 input 标签 的 示例 效果 


3. 《select》 和 《option》 标 签 
<select>…</select》 标 签 用 于 在 表单 中 插入 一 个 列表 框 对 象 。 它 和 
<option2《/option> 标 签 一 起 使 用 , “option> 标 签 用 于 为 列表 框 诬 加 列表 项 。《select> 标 
签 的 常用 属性 简要 介绍 如 下 : 
€ name: 指定 列表 框 的 名 称 。 
@ size: 指定 列表 框 中 显示 多 少 列 表 项 ( 行 )， 如 果 列 表 项 数目 大 于 size 参数 值 ， 
那么 通过 深 动 条 来 深 动 显示 。 
€ nultiple: 指定 列表 框 是 人 否 可 以 选中 多 项 ， 默 认 下 只 能 选择 一 项 。 
<option》 标 签 的 参数 有 两 个 可 选 参 数 ， 介 绍 如 下 : 
€ selected: 用 于 设 定 在 初始 时 本 列表 项 是 被 默认 选中 的 。 
@ value: 用 于 设 定 本 列表 项 的 值 ， 如 果 不 设 此 项 ， 则 默认 为 标签 后 的 内 容 。 
@ 在 Dreamweaver 的 “代码 ”视图 的 <body>…</body?》 标 签 之 间 输 入 以 下 代码 : 
Xform action-none. jsp method=POST> 


select name-fruits size-3 multiple»? 
《<option selected> 足 球 
《option selected> 监 球 
<option value-My Favorite> 乒 乓 球 
Coption»?P]-EEZK 
X/select^€p5 
<input type-submit»Xinput type-reset»? 
《</form> 
保存 文档 ， 并 按 F12 键 在 浏览 器 中 全 看 显示 效果 ， 如 图 6-27 所 示 。 
4. 《textarea> 标 签 
《textarea>…<《/textarea》 标 签 的 作用 与 <input》 标 签 的 type 属 性 值 为 text 时 的 作用 
相似 ， 不 同 之 处 在 于 , 《textarea> 显 示 的 是 多 行 多 列 的 文本 区 域 ， 而 《input> 文 本 框 只 有 
一 行 。《textarea》 和 </textarea) 之 则 的 文本 是 文本 区 域 的 初始 文本 。《textarea》 标 签 的 
名 用 属性 如 下 : 
€ name: 指定 文本 区 域 的 名 称 。 
@ rows: 文本 区 域 的 行 数 。 
€ cols: 文本 区 域 的 列 数 。 


94 


FF n wa 
HTML 与 CSS 基 础 vobia 


@ wrap: HT EET BAHMRTT, BUEH off (不 换行 ， 是 默认 设置 ) 、soft CX 


换行 ) 和 hard《〔〈 硬 换行 ) 。 
@ 在 Dreamweaver 的 “代码 ”视图 的 <body>…《/body?》 标 签 之 间 输 入 以 下 代码 : 
<form action=/none. jsp method=POST> 
<textarea name-comment rows-5 cols=20> 
在 这 里 输入 要 得 询 的 内 容 
</textareay> 
Sbr> 
«input type=submit><input type-reset»? 
</form> 
保存 文档 ， 并 按 F12 键 在 浏览 占 中 预 移 显示 效果 ， 如 图 6-28 所 示 。 


住人 这 里 输入 要 查 向 的 内 容 


gom (EEG 


图 6-27 PUR 图 6-28 NASCAR 


[16.3.9 其 他 标签 


Hi, 


1l. 《img> 标 签 

图 像 可 以 使 页 面 更 加 生动 美观 、 富 有 生机 。 在 HTML 文 档 中 插入 图 像 通 过 《<img》 标 签 实 

该 标签 除 src 属 性 是 不 可 缺 省 的 以 外 ， 其 他 属性 均 为 可 选项 。 其 属性 如 下 所 示 : 

e src: 用 于 指定 要 插入 图 像 的 地 址 和 名 称 。 

e alt: 用 于 设置 当 图 像 无 法 显示 时 的 蔡 换 文本 ， 或 载 入 图 像 后 ， 将 有限 标 移 到 图 像 
上 时 显示 的 提示 文本 。 


e align: 用 于 设置 图 像 和 页 面 其 他 对 象 的 对 齐 方式 ， 取 值 可 以 是 top, middle 和 
bottom。 

€ border: 用 于 设置 图 像 的 边框 厚度 ， 以 像素 为 单位 。 

€  vspace: 用 于 设置 图 像 与 其 他 图 像 或 页 面 对 象 的 重生 边 距 ， 以 像素 为 单位 。 

€ hspace: 用 于 设置 图 像 与 其 他 图 像 或 页 面 对 象 的 水 平 边 距 ， 以 像素 为 里 位 。 


€ width 和 height: 用 于 设置 图 片 的 宽度 和 高 度 。 
使 用 示例 : 
《img src-' new. gif” width= 20" height- 20" border-"1^» 
《img》 标 签 还 可 用 于 在 网 页 中 插入 影像 片断 ， 例 如 : 
<img src= url. gif” dynsrc= url.avi > 
> Dynsrc: 设置 播放 视频 的 AVI 文件 。 例 如 上 面 的 语句 使 用 url. avi 文件 来 播放 。 
> Src: 指定 作为 视频 的 封面 的 图 厂 。 例 如 上 面 的 语句 指定 用 url. gif， 即 : 在 浏 
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览 器 尚未 完全 读 入 AVI 文件 时 ， 先 在 AVI 播放 区 域 显示 url. gif。 
» Start: 设置 何 时 开始 播放 AVI. HO fileopen, mouseover, H.E 1 
#=fileopen， 即 在 链接 到 含 本 标签 的 页 面 时 开始 播放 AVI; 而 mouseover 是 指 当 
把 鼠标 移 到 AVI 播放 区 域 之 上 时 才 开 始 播放 AVI， 例 如 : 
《img src- SAMPLE-S. GIF” dynsfrc= SAMPLE-S. AVI^ start-mouseover? 
用 户 也 可 以 同时 设置 两 者 ， 例 如 : 《img start=fileopen, mouseover>。 
> Controls: 用 于 在 视频 窗口 下 附加 MS—WINDOWS 的 AVI 播放 控制 条 。 
例如 : 《img src=”SAMPLE-S. GIF" dynsrc=”SAMPLE-S. AVI^ controls? 
> Loop: 设置 循环 播放 。 
例如 : 《img src-" SAMPLE-S. GIF”dynsrc=”SAMPLE-S. AVI”loop=3》 表 示 循 环 播放 3 次 。 
2. Xa» RAS 
ACRAS AS IR] EL IRJBERE . HTMLZEOBLISEBEBEERAS Ca^ SCBUEB BEBE]. Ca^ b SE AES 
闭 性 标签 ， 其 起 止 标签 之 间 的 内 容 即 为 锚 标 。《a> 标 签 有 两 个 不 能 同时 使 用 的 属性 href 和 
name， 此 外 还 有 target 必 性 等 ， 分 别 介 绍 如 下 : 
e href: 用 于 指定 目标 文件 的 URL 地 址 或 页 内 销 点 。 
当 超 级 链接 的 一 个 起 点 要 链接 到 销 点 时 ， 应 采用 如 下 的 格式 : 
《a herf="#.…“>…<《/a>。herf 属 性 值 的 # 写 后 的 省 略 号 为 命名 销 点 的 名 学 。 
e 《a»》 标 签 使 用 此 属性 后 ， 在 浏览 器 中 单 击 销 标 ， 页 面 将 跳 转 到 指定 的 页面 或 本 页 
中 指定 的 销 点 位 置 。 例 如 : 
《a href= url > 点 击 这 里 《/a><br> 
表示 当 单 击 链接 文本 “点 击 这 里 ”时 ， 会 打开 ur1l 上 所 指 回 的 文件 页 面 。 
Xa herf=“http://www. tom. com/abc/002. htm#abc > 销 点 人 /ay> 
表示 当 点 击 链接 起 点 文字 “ 锁 点 ”时 ， 将 会 打开 http://www. tom. com/abc/002. htm 
并 定位 到 该 页 面 中 命名 为 abc 销 点 的 特定 位 置 。 
€ name: 用 于 标识 一 个 目标 ， 该 目标 终点 是 一 个 文件 中 指明 的 特定 的 地 方 。 这 种 链 
接 有 的 终点 就 称 为 命名 销 点 。 
e 例如 : 《<a name= name >text</a> 
@ target: 用 于 设 定 打开 狐 页 和 面 所 在 的 目标 窗口 。 如 果 当 前 页 面 使 用 了 框 染 技术 ， 
还 可 以 把 target 设置 为 框架 名 。 
例如 : «a herf-" http://www. tom. com/abc/002. htmtabc" target=main> 销 点 链接 
(/a» 
表示 当 点 击 链接 起 点 文字 “ 锁 点 链接 ”时 ， 将 链接 的 页 面 在 名 为 main 的 框架 中 打开 。 
3. “meta> 标 签 
<meta> 标 签 是 实现 元 数据 的 主要 标签 ， 它 能 够 提供 文档 的 关键 字 、 作 者 、 描 述 等 多 种 
言 筷 ， 在 HTML 的 头 部 可 以 包括 任意 数量 的 meta> 标 签 。《meta> 标 签 是 非 成 对 使 用 的 标签 ， 
它 的 参数 介绍 如 下 : 
@ nane: 用 于 定义 一 个 元 数据 属性 的 名 称 。 
€ content: 用 于 定义 元 数据 的 属性 值 。 
€ scheme: 用 于 解释 元 数据 属性 值 的 机 制 。 


b 
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€ http-equiv: 可 以 用 于 替代 name 属性 ，HTTP 服务 器 可 以 使 用 该 属性 来 从 HTTP. 响 
应 头 部 收集 信息 。 
€ charset: 用 于 定义 文档 的 字符 解码 方式 。 使 用 示例 : 
《<meta name = "keywords" content = “comey 人 制作 “> 
<meta name = "description content = ”comey 制 作 “> 
<meta http-equiv= Content-Type” content= text/html; charset=gb2312 > 
4. 《link》 标 签 
<link》 标 签 也 称 作 外 部 样式 表 ， 它 是 把 CSS 写 到 一 个 扩展 名 为 CSS 的 文件 中 ， 主 要 用 于 
多 个 页 面 排版 风格 的 统一 控制 ， 避 人 免 单 个 页 面 重复 地 设置 CSS 样 式 。<link》 是 一 个 非 封 闭 
性 标签 ， 只 能 在 <head>…“/head> 中 使 用 。 

《4] ink> 标 签 定 义 了 文档 之 间 的 包含 。 在 HTML 的 头 部 可 以 包含 任意 数量 的 《Link> 标 签 。 
《link> 标 签 市 有 很 多 参数 ， 下 面 介 绍 的 是 一 些 冲 用 的 参数 : 

e href: 用 于 设置 链接 资源 所 在 的 URL. 

e title: 用 于 描述 链接 关系 的 字符 串 。 

e rel: 用 于 定义 文档 和 所 链接 资源 的 链接 关系 ， 可 能 的 取 值 有 Alternate, 
Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, 
Chapter, Section, Subsection, Appendix, Help 和 Bookmark 等 。 如 果 和 希望 指 
定 不 止 一 个 链接 关系 ， 可 以 在 这 些 值 之 间 用 空格 隔 开 。 

e rev: 用 于 定义 文档 和 所 链接 资源 之 间 的 反 回 关系 。 其 可 能 的 取 值 与 rel 属性 相 
同 。 

ful, «link rel= Shortcut Icon" href-"soim.ico >， 表 示 将 浏览 器 地 址 栏 里 面 的 

e 图 标 蔡 换 为 href 属 性 指 问 的 图 标 ， 当 收藏 该 页 时 候 ， 收 藏 夹 里 的 图 片 也 将 随 之 改变 。 
<link href-"css.css^ rel=“”stylesheet”type=“text/css” 表示 把 文档 和 一 个 CSS 
文档 连接 起 来 ， 在 网 页 中 应 用 css. css 文 件 作 为 其 外 部 样式 。 

5. 《base> 标 签 

《base》 标 签 是 一 个 非 封 闭 性 的 基 链 接 标 签 ， 定 义 文档 的 基础 URL 地 址 。 在 文档 中 所 有 

的 相对 地 址 形式 的 URL 都 是 相对 于 这 里 定义 的 URL 而 言 的 。 一 篇 文档 中 的 Cbase》 标 签 不 能 多 
于 一 个 , 必须 定义 于 标签 chead>》 与 《</head) 之 间 , 并 且 应 该 在 任何 包含 URL 地 址 的 语句 之 前 。 
《base》 标 签 的 属性 简要 介绍 如 下 : 

e href: 指定 了 文档 的 基础 URL 地 址 。 该 属性 在 Cbase》 标 签 中 是 必须 存在 的 。 

€ target: target 属性 同 框 染 一 起 使 用 ， 它 定义 了 涩 文档 中 的 链接 被 点 击 后 ， 在 哪 
一 个 框架 集中 展开 页 面 。 如 果 文 档 中 超级 链接 没有 明确 指定 展开 页 面 的 目标 框 染 
集 ， 则 使 用 这 里 定义 的 地 址 代 蔡 。 

例如 ， 如 果 在 HIM 文档 的 头 部 定义 了 (base href = http://www. microsoft. com 

tarEetE JDlank ^» 5 W| 单 d — dd o 接 da href-"document. html” 
target-" self'»documentX/a^, 将 打开 http://www. microsoft. com/document. html XC fit, 
t5. 3C e CETEDRT t e BR] OC TF gi Jn Ede mEBZdRIUHuE. S4 HROCTEUPR B SEBe CH i8 XE 
target 属 性 ， 束 用 base 标 签 中 的 target 属 性 。 

6. “bgsound> 标 签 
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<bgsound> 标 签 是 用 于 在 网 页 中 添加 背景 音乐 。 其 第 用 到 两 个 属性 src 属 性 和 1loop 属 
性 。 

其 中 ，src 属 性 用 于 设置 所 加 载 的 背景 音乐 的 URL 地 址 ; loop 属性 用 于 设置 背景 音乐 播 
放 的 循环 次 数 ， 当 其 属性 值 设 置 为 -1 时 表示 背景 无 限制 循环 播放 ， 全 到 页 和 面 补 关闭 。 

例如 ，《bgsound sfc= sound. wav” loop=32><《/bgsound> 表 示 添 加 网 页 相同 目录 下 的 
sound. wav 文 件 作 为 背景 首 乐 ， 并 设置 循环 播放 次 数 为 3 次 。 

7. 《style> 标 签 

《style>…“</style> 标 签 用 于 在 网 页 当前 文档 中 创建 样式 ， 也 叫 嵌 入 样式 表 ， 它 把 CSS 
直接 写 入 到 HTML 的 head 部 分 ， 这 是 CSS 最 为 典型 的 使 用 方法 。 

在 《<style>》 标 签 中 可 以 创建 多 个 不 同 的 命名 样式 。 文 档 内 容 可 以 直接 运用 这 些 定义 好 
的 样式 。 例 如 : 


《<style type= text/css > 


Si 
body { 
background-image: url (2004116234509589. gif) ; 
background-repeat: repeat; 
j 
a:link | 
color: 2006600; 
text-decoration: none; 
j 


a:visited 1 
text-decoration: none; 
color: 8660000; 


a:hover 1 


text-decoration: none; 


acaeblve- 
text-decoration: none; 
color: 20000FF; 
} 
-— 
</style> 
在 上 和 而 的 代码 中 ，<style>》 标 签 定 义 了 5 个 样式 。 分 列 用 于 设 敬 页 面 背 景 图 像 、 示 访问 
过 的 链接 闫 色 、 已 访问 过 的 链接 磊 色 、 妆 前 链接 和 活动 链接 磊 色 。 如 果 要 在 文本 中 应 用 上 
述 样 式 ， 可 以 在 文学 修饰 标签 中 应 用 class 属 性 和 属性 值 。 例 如 : 
《font class=a:active》 我 的 主页 《</font> 
8. 《marquee》 字 大 标签 
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&marquee? ... 《/marquee》 标 签 用 于 在 页 和 面 中 设置 深 动 子 倚 。 其 第 用 的 属性 如 下 : 

> direction: HT E FABRI. REIR HI WEE left 和 right. 

>  behaviorscroll: Hl T A ELEAREBITRZEJJJ 3x» 属性 值 可 设置 为 slide. alternate. 

> loop: 用 于 设置 字 适 的 深 动 时 的 循环 次 数 ， 属 性 值 可 设置 为 整数 ， 厂 未 指定 则 循 

环 不 止 (infinite) 。 

> scrollamount: 用 于 设置 字 大 滚动 的 速度 ， 属 性 值 为 整数 。 

> scrolldelay: 用 于 设置 字幕 滩 动 的 延迟 时 间 ， 属 性 值 为 整数 。 

例如 : 

<marquee loop-3 width=50% behavior-slide scrolldelay-500 scrollamount-100» 
刚刚 风 无 意 吹 起 !《/marquee> 


6. 4 CSS 样 式 


在 网 页 制作 过 程 中 ， 可 能 经 和 营 需 要 在 多 个 文档 中 应 用 一 些 相 同 的 、 复 杂 的 段 洲 或 字符 
特效 ， 并 且 还 要 磐 入 某 种 样式 的 图 像 效 果 。 使 用 CSS 样 式 可 以 轻松 解决 这 个 问题 。 

CSS 是 一 组 能 控制 文档 范围 内 文本 外 观 的 格式 化 属性 集合 ， 是 一 个 包含 了 一 些 CSS 标 
签 ， 以 . css 为 文件 名 后 缀 的 文本 文件 。 它 是 一 种 设计 网 页 样式 的 工具 ， 在 标准 的 网 页 设计 
中 负责 网 页 内 容 (XHTML) 的 表现 。 与 传统 的 HTML 样式 相 比 ，CSS 样 式 有 以 下 特点 : 

1. 将 格式 和 结构 分 离 

利用 CSS 样 式 ， 不 必 再 把 繁杂 的 样式 定义 编写 在 文档 中 ， 可 以 将 所 有 有 关 文 档 的 样式 
全 部 脱离 出 来 ， 在 行 定义 、 在 标题 中 定义 ， 甚 至 作为 外 部 样式 文件 供 HTML 调 用 ， 控 制 多 篇 
文档 的 文本 格式 ， 有 具有 很 好 的 易 用 性 和 扩展 性 ， 同 时 HTML 仍 可 以 保持 简单 明了 的 初衷 。 

2. 以 前 所 未 有 的 能 力 控 制 页 面 布局 

HTML 语 言 对 页 面 总 体 上 的 控制 很 有 限 ， 如 精确 定位 、 行 间距 或 学 间距 每 ， 而 这 些 操 作 
通过 CSS 可 轻松 实现 。 

3. 制作 体积 更 小 ， 网 页 下 载 更 快 

CSS 只 是 简单 的 文本 ， 它 不 需要 图 像 ， 不 需要 执行 程序 ， 不 需要 插件 。 使 用 层 登 样式 
表 可 以 减少 表格 标签 及 其 他 加 大 HTML 体 积 的 代码 ， 减 少 图 像 使 用 量 从 而 控制 文件 大 小 。 

4. 轻松 地 同时 更 新 多 个 网 页 

在 没有 CSS 的 时 代 ， 如 果 想 更 新 整个 站 点 中 所 有 主体 文本 的 字体 ， 就 必须 一 页 一 页 地 
修改 网 页 ， 费 时 旦 容易 出 错 。 而 CSS 主 由 束 是 将 格式 和 结构 分 离 ， 网 页 设计 者 可 以 将 站 点 
上 所 有 的 网 页 都 指 问 单 一 的 一 个 CSS 文 件 ， 只 要 修改 CSS 文 件 中 的 某 一 行 ， 那 么 整个 站 点 都 
会 随 之 发 生 改 变 。 

5. 民 好 的 兼容 性 

CSS 的 代码 有 很 好 的 莱 容 性 ， 也 束 是 说 ， 即 使 某 些 用 户 的 浏览 器 不 文 持 CSS， 在 浏览 采 
用 了 CSS 的 网 页 时 ， 浏 览 器 会 忽略 CSS 定 义 的 格式 ， 从 而 不 影响 用 户 浏览 。 

Dreamweaver CS5 提 供 了 对 CSS 样 式 创作 的 完美 支持 ， 无 需 编 写 代 人 码 即 可 实施 CSS 最 
佳 做 法 。 用 户 可 以 直接 在 “属性 ”面板 中 新 建 CSS 规则 ， 并 在 样式 级 联 中 清晰 、 人 简单 地 
显示 每 个 属性 的 相应 位 置 ， 从 而 可 以 更 方便 地 为 元 素来 控制 和 删除 样式 。 
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在 Dreamweaver CS5 中 ， 执 行 “ 窗 口 ”/“CSS 样 式 ” 命 令 ， 即 可 打开 “CSS 样 式 ” 面 板 ， 
如 图 6-29 所 示 。 


css 样式 Dim 
全 部 | 正在 | 


所 选 内 容 的 质 要 
color #000 


关于 “color” [pu] PS 
“bedy” 的 尾 性 


im Aged L $384 


图 6-29 “CSS 样式 ”浮动 面板 


在 浮动 面板 上 可 以 选择 两 种 模式 的 视图 ， 选 择 “ 全 部 ”模式 ， 则 列 出 整 份 文件 的 CSS 
规则 和 属性 ， 选择 “正在 ”模式 ， 则 显示 当前 选取 页 面 元 素 的 CSS 规则 和 属性 。 


Lje.4.1 基本 语法 规范 


CSS 是 一 种 对 web 文 档 添 加 样式 的 简单 机 制 ， 属 于 表现 层 的 布局 语言 。CSS 样 式 的 定义 
代 但 一 般 书写 在 HTML 文 档 的 头 部 ， 通 第 由 一 系列 的 样式 规则 组 成 ， 以 告诉 浏览 器 如 何 呈 现 
一 个 文档 。 将 样式 规则 加 入 到 HTML 文 档 中 有 很 多 方法 ， 最 简单 的 启动 方法 是 使 用 HTML 的 
《style> 标 签 。 

CSS 样 式 表 每 个 规则 的 组 成 包括 一 个 选择 器 (通常 是 一 个 HTWL 的 元 素 ， 例 如 body、p 或 
em) 和 该 选择 占 所 接受 的 样式 。 定 义 一 个 元 到 可 以 使 用 多 个 属性 ， 每 个 属性 禹 一 个 值 ， 共 
同 描述 选择 器 应 该 如 何 呈 现 。 样 式 规则 组 成 如 下 所 示 : 

XcBExs {属性 1: 值 1; 属性 2: 值 2} 

下 和 面 看 一 个 典型 的 CSS 语 句 : 

p (COLOR:&FF0000; BACKGROUND : SFFFFFF] 

其 中 ，p 我 们 称 之 为 “选择 器 ”(selectors) ， 用 于 指明 该 语句 是 要 给 p 定 义 样式 ;一 
对 大 括号 人 用 于 样式 声明 ， 大 括号 中 的 COLOR 和 了 BACKGROUND 称 为 “属性 ” (property), ^ 
同属 性 之 间 用 分 号 分 隔 ，#FF0000 和 #FFFFFF 是 属性 的 值 (value)。 

单一 选择 器 的 复合 样式 声明 应 该 用 分 与 隔 开 。 例 如 ， 以 下 是 一 段 定义 了 Hl 和 H2 元 素 的 
颜色 和 字体 大 小 属性 : 

«HEAD» 
《TITLE> 第 一 个 CSS 例 子 </TITLE> 
«STYLE TYPE= text/css > 


HI { font-size: x-large; color: red } 


H2 { font-size: large; color: blue | 
</STYLE> 
</HEAD> 
上 述 的 样式 表 告 诉 浏览 占用 加 大 与 的 红色 字体 显示 一 级 标题 ， 用 大 号 的 监 色 字体 显示 
二 级 标题 。 
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如 末 要 将 多 个 选择 器 声明 为 相同 的 样式 ， 为 了 减少 样式 表 的 重复 声明 ， 可 以 使 用 组 合 
的 选择 嚣 声明。 例如， 将 文档 中 所 有 标题 的 磊 色 设置 为 红色 ， 了 字体 为 sans-serif， 可 以 通 
过 以 下 组 合 给 出 声明 : 

Hl, H2, H3, H4, H5, H6 { color: red; font-family: sans-serif } 

此 外 ， 声 明 样 式 时 ， 还 可 以 用 空格 隔 开 两 个 或 更 多 的 单一 选择 器 ， 这 种 选择 器 称 为 天 
联 选择 器 。 由 于 层 车 顺序 的 规则 ， 它 们 的 优先 权 比 单一 的 选择 器 大 。 例 如 : 

p em { background: red ] 

这 个 例子 中 关联 选择 器 是 p em。 这 个 值 表示 段 沙 中 的 强调 文本 会 是 红色 背景 而 标题 
的 强调 文本 则 不 受 影 啊 。 

下 面 分 别 介绍 样式 表 的 各 个 组 成 部 分 。 

1. 选择 器 

任何 html 元 系 都 可 以 是 一 个 CSS 的 选择 器 ， 选 择 需 仅仅 是 指 癌 特别 样式 的 元 系 。 根 据 
声明 的 不 同 ， 可 把 选择 器 分 为 4 类 ， 分 别 介绍 如 下 : 

e 类: 创建 可 作为 “类 ”属性 应 用 于 文本 冰 围 或 文本 块 的 自 定 义 样 式 。 它 由 用 户 给 

定 样 式 表 元 素 名 称 ， 并 且 可 以 在 整个 HTML. 中 被 调用 。 

“类 ”可 以 看 作 是 为 样式 规则 命名 的 选择 器 。 一 个 html 元 素 的 选择 器 可 以 有 不 同 的 
“类 ”， 因 而 允许 同一 元 素 有 不 同 的 样式 。 在 CSS 中 ， 用 一 个 点 开头 表示 类 别 选择 器 定义 ， 
例如 : 

.l4px {color : #f60 ;font-size:l4px ;j 

这 个 方法 比较 简单 灵活 ， 可 以 随时 根据 页 面 需要 新 建 和 删除 。 例 如 ， 在 不 同 的 段 沙 使 
用 不 同 磊 色 的 文本 : 


p.red { color: red j 


p.green { color: green | 
以 上 的 例子 建 这 了 两 个 类 ，red 和 green， 供 不 同 的 段落 使 用 。 如 条 要 将 样式 应 用 于 指 
定 的 网 页 元 素 ， 用 class= 类 别名 -的 方法 指明 元 素 使 用 的 样式 类 ， 例 如 : 
Xp class=red》 第 一 段 文 本 《</p> 
则 段 内 文本 使 用 p. red 类 样式 。 每 个 选择 器 在 某 一 时 刻 只 允许 使 用 一 个 类 。 
声明 头 时 ， 也 可 以 不 指定 具体 元 素 ， 例 如 ; 
.cn01 { font-size: small j 
在 这 个 例子 ， 名 为 cn01 的 类 可 以 被 用 于 任何 元 素 。 
e 标签: 用 于 重新 定义 一 个 特定 HTML 标签 的 默认 格式 。 单 击 “CSS” 面板 中 “标签 
下 拉 列 表 框 ， 可 以 看 到 所 有 的 HTML 标识 符 ， 从 中 选择 一 个 标识 符 ， 或 直接 答 入 
一 种 HTML 标识 符 ， 如 4B0DY>, 《H1> 等 等 ， 重 新 进行 定义 。 样 式 一 经 定义 了 束 在 整 
个 HTML 文件 中 通用 。 
例如 ， 链 接 文本 默认 情况 下 均 显 示 为 监 色 ， 且 有 下 划 线 。 以 下 代码 重 狐 定义 了 《a> 
标签 ， 设 置 链 接 文 本 的 字体 族 为 Verdana，Arial，Helvetica，sans-serif; 大 小 为 12; 
颜色 为 红色 。 


a 1 


font-family: Verdana, Arial, Helvetica, sans-serif; 
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font=s1Ze: L2px; 
font-style: normal; 
color: &8FF0000; 


e 复合 内 容 : 用 于 定义 组 合 样式 《两 个 或 两 个 以 上 CSS 76:82H 60. 以 及 具有 特殊 序 
列 号 (ID) 的 样式 元 素 。 选 择 器 提供 了 4 种 给 定 的 组 合 样式 ， 分 别 是 a:active 
(激活 的 链接 ) ; a:hover (当前 链接 ) ; a:link (链接 ) ; a:visited (访问 
过 的 链接 ) 。 通 过 对 这 4 个 元 到 的 定义 可 以 在 网 页 中 非常 方便 地 制作 有 个 性 的 超 


BEBE, 
例如 ， 以 下 代码 设置 链接 文本 的 字体 为 隶书 ， 了 字体 大 小 为 14px; 颜色 为 绿色 。 
a:link { 


font-family: ^3& 
font-size: l4px; 
color: 4006600; 
j 
e ID: 选择 器 用 于 个 别 地 定义 每 个 元 又 的 成 分 。 这 种 选择 器 应 该 尽量 少 用 ， 因 为 它 
其 有 一 定 的 局 限 。 指 定 ID 选择 器 时 ， 其 名 字 前 面 要 有 指示 符 “#”。 例 如 : 
Hmyid{ text-indent: 3em } 
使 用 ID 选择 器 的 方式 如 下 : 
Xp idemyid^ X Zglt3emcX/p? 
2. 属性 、 值 和 注释 
为 选择 器 指定 属性 是 为 了 有 具体 设置 选择 器 采 方 面 外 观 。 属性 包括 颜色 、 边界 和 字体 等 。 
值 是 一 个 属性 接受 的 指定 。 下 和 耐看 午 说 一 下 闫 色 值 和 学 体 的 属性 值 。 
颜色 值 可 以 用 RGB 值 写 ， 例 如 : color : rgb(255, 0,0) ， 也 可 以 用 十 六 进 制 写 ， 例 如 
color:#FF0000。 如 果 十 六 进 制 值 是 成 对 重复 的 可 以 简写 ， 效 果 一 样 。 例 如 :#FF0000 可 以 
写成 #F00。 但 如 果 不 乍 复 就 不 可 以 简写 ,例如 #FCI1A1B 必 须 写 满 六 位 。 
对 于 字体 ，web 标 准 推荐 如 下 字体 定义 方法 : 
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, ^K 


体 , sans-serif; } 

字体 按照 所 列 出 的 顺序 选用 。 

在 上 例 中 ， 如 果 用 户 的 计算 机 包含 有 Lucida Grande 字 体 ， 文 档 将 被 指定 为 Lucida 
Grande。 如 有 条 没有 ， 则 被 指 定 为 Verdana 字 体 ， 如 条 也 没有 Verdana， 如 指 定 为 Lucida 宇 体 ， 
依 此 类 推 ， 其 中 ，Lucida Grande 字 体 适 合 Mac OS X; Verdana 字 体 适 合 所 有 的 Windows 系 
统 ; Lucida 适 合 UNIX 用 户 ; 宋体 适合 中 文 稍 体 用 户 ， 如 果 所 列 出 的 字体 都 不 能 用 ， 则 调用 
系统 字体 sans-serif。 

样式 表 里 面 的 注释 使 用 与 C 语 言 编程 中 一 样 的 约定 方法 ， 即 使 用 /#…'#/ 指 定 。 例 如 ， 
以 下 代码 就 是 CSS1 注 释 的 一 个 例子 : 

/* COMMENTS CANNOT BE NESTED */ 

3. 伪 类 和 伪 元 素 
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伪 类 和 伪 元 素 是 特殊 的 类 和 元 素 ， 能 上 自动 地 被 文 持 CSS 的 浏览 器 所 识别 。 伪 类 区 别 于 
不 同 种 类 的 元 素 ， 例 如 visited links (已 访问 的 连接 ) 和 active 1inks (可 激活 连接 ) 
描述 了 两 个 定位 销 (anchors) 的 凌 型 。 伪 元 系 指 元 聚 的 一 部 分 ， 例 如 段落 的 第 一 个 字母。 
伪 类 或 伪 元 又 规则 的 定义 形式 与 选择 器 相似 ， 如 下 所 示 : 
伪 类 { 属性 : fü j 
伪 元 系 { 属性 : fü } 
伪 基 和 伪 元 系 不 是 用 html 的 class 属 性 指定 。 一 役 的 类 可 以 与 伪 类 和 伪 元 际 一 起 使 用 ， 
例如 下 面 的 形式 : 
选择 器 . 类 : 伪 类 { 属性 : 值 } 
选择 器 . 类 : 伪 元 素 { 属性 : 值 } 
利用 的 伪 类 和 伪 元 素 如 下 : 
e 定位 销 伪 类 
伪 类 可 以 指定 a 元 到 以 不 同 的 方式 显示 链接 、 已 访问 链接 和 可 激活 链接 。CSS 中 用 4 个 
伪 类 来 定义 链接 的 样式 ， 分 别 是 : a:link、a:visited、a:hover 和 a : active, f: 
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;j 


a:visited lfont-weight : bold ;text-decoration : none ;color : #c30 ;j 
a:hover {font-weight : bold ;text-decoration : underline ;color : &f60 ;; 
a:active lfont-weight : bold ;text-decoration : none ;color : #F90 ;j 
E EXER EX ISEBR. DUIIBIGEHU BEBE. BUbNIE E EJIIS Ex P BUERIE TIRE RA e 
注意 : 在 CSS 中 定义 链接 样式 时 ， 必 须 按 以 上 顺序 书号， 否则 显示 效果 可 能 会 和 预想 的 不 一 样 。 
e 首 行 伪 元 素 : 通常 报纸 上 的 文章 前 行 都 会 以 全 部 大 写 的 粗 体 展 示 。 使 用 CSS1 的 
首 行 伪 元 素 可 以 轻松 实现 这 个 功能 。 首 行 伪 元 素 可 以 用 于 任何 块 级 元 素 ,， 例 如 P、 
Hl 等 。 以 下 是 一 个 站 行 伪 元 素 的 例子 : 
P:first-linelfont-variant: small-caps;font-weight: bold} 
e 首 个 字母 伪 元 素 : 用 于 加 大 显示 每 个 单词 的 首 学 母 。 一 个 首 个 字母 伪 元 素 可 以 用 
于 任何 块 级 元 素 。 例 如 : 
P:first-lettertfont-size: 300%; float: leftj 
则 段落 中 首 字母 会 比 普通 字体 加 大 三 倍 。 


[L]6. 4.2 创建 CSS 样 式 


层 登 样式 表 是 W3C 用 来 加 强 HTML 标 签 在 显示 网 页 文件 上 的 不 足 之 处 而 规划 的 ， 所 以 在 
用 法 上 其 本 与 HTWL 并 无 两 样 ， 只 是 加 强 了 原来 HTWL 中 样式 的 功能 。 下 面 通 过 一 个 简单 实例 
介绍 创建 CSS 样 式 的 方法 步 又 。 
01 将 插入 点 放 在 文档 中 。 在 CSS 样 式 面 板 中 ， 单 击 面 板 右 下 角 区 域 中 的 独 建 CSS 样 
式 按钮 车， 
02. 在 弹出 的 如 图 6-30 所 示 的 “ 狐 建 CSS 规 则 ”对 话 框 中 选择 CSS 样 式 表 的 类 型 。 本 
例 选 择 “ 标 签 ”。 
在 Dreamweaver CS5 中 可 以 定义 以 下 4 种 类 型 的 CSS 样 式 : 
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(10 28: 创建 可 作为 类 属性 应 用 于 文本 范围 或 文本 块 的 目 定义 样式 。 选 择 该 项 后 要 
在 “名 称 ” 域 中 输入 样式 名 称 。 
(20 标签: 重 定 义 特定 HTML 标 签 的 默认 格式 。 选 择 该 项 后 要 在 “标签 ” 域 中 输入 一 
个 HTML 标签 ， 或 从 下 拉 沫 单 中 选择 一 个 标签 。 
(3) 复合 内 容 : 为 具体 某 个 标签 组 合 或 所 有 包含 特定 Id 属性 的 标签 定义 格式 。 选 择 
该 项 后 ， 需 要 在 “选择 器 ” 域 中 输入 一 个 或 多 个 HTML 标签 ， 或 从 弹出 式 染 单 中 选择 一 个 标 
签 。 弹 出 荣 单 中 提供 的 选择 堪 包 括 a:active、a:hover、a:1link 和 a:visited。 
(4) ID: 仪 用 于 一 个 HTML 元 素 ， 个 别 地 定义 该 元 素 的 成 分 。 指 定 ID 选 择 右 时 ， 其 名 
学 前 面 要 有 指示 符 “#”。 
03 上 在 “选择 闫 名称” 下 方 的 下 拉 列 表 中 选择 “hl”。 
04 在 “规则 定义 ”下 方 的 下 拉 列 表 中 选择 定义 样式 的 位 置 。 本 例 选 择 “ 仪 限 该 文 
档 ”。 
信行 要 创建 外 部 样式 表 ， 请 选择 “新 建 样 式 表 文件 ”。 
争 “” 寿 要 在 当前 文档 中 秽 入 样式 ， 请 选择 “ 仅 限 该 文档 ”。 


05 "iud "Big" TEL 出 现 如 图 6- 31 所 示 的 “CSS 规 则 定义 ”对 话 框 。 
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图 6-30 “新 建 CSS 规 则 ”对 话 框 图 6-31 “CSS 规 则 定义 ”对 话 框 


06. 在 对 话 框 中 设置 新 CSS 样 陈 选 项 , 类型 定义 如 网 6-31 所 示 。 然 后 在 分 关 栏 选择 “区 
块 ”， 在 打开 的 负面 设 置 文本 对 章 方式 为 “居中 ”。 设 年 完毕 后 单 击 “确定 ”按钮 。 
至 此 ，CSS 样 式 创建 完毕 ， 应 用 该 样式 前 后 页 面 的 效果 如 图 6-32 所 示 。 
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图 6-32 ”应 用 新 规则 前 后 的 效果 
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[Llo. 4. 3 链接 外 部 CSS 表 


所 谓 外 部 CSS 样 式 表 ， 指 的 是 一 个 包含 样式 和 格式 规范 的 外 部 文本 文件 。 对 一 个 外 部 
CSS 样式 表 进 行 编辑 后 ， 所 有 同 该 CSS 样式 表 链 接 的 文档 都 会 根据 所 作 的 修改 目 动 进行 
更 新 。 
下 面 通 过 一 个 简单 实例 省 示 链接 /导入 一 个 外 部 样式 表 的 操作 步骤 
01. 继续 上 例 。 先 创建 一 个 外 部 CSS 样 式 表 。 在 “ 狐 建 CSS 规 则 ”对 话 框 中 选择 CSS 样 
式 的 类 型 为 “复合 内 容 ”， 并 在 “选择 器 名 称 ” 下 拉 列 表 中 选择 “a:1ink”。 定 义 样式 的 
位 置 选择 “新 建 样式 表 ”。 
02. 单 击 “确定” 后， 在 弹出 的 对 话 框 中 将 样式 保存 为 newcss. css。 单 击 “ 确 定 ”， 
在 打开 的 “a:1ink 的 CSS 规 则 定义 ”对 话 框 中 设置 文本 的 闫 色 为 深 绿 色 ， 无 修饰 。 
03. 同 理 ， 再 创建 一 个 样式 表 ， 选 择 器 为 a:hover ， 定 义 样式 的 位 置 选择 
"newcss.css" , 5€ 5 4920, BNfAZJZLfA. 
04 在 “CSS 样 式 ” 面 板 中 ， 单 击 名 按钮 ， 弹 出 如 图 6-33 所 示 的 “链接 外 部 样式 表 ” 
对 话 框 。 


sso |! mE - | 
ASSET UA A38 SOHROORE FERE ERE. 


Dreweesaver. QUIRUIS CREITULMRIE RR. «m 
Kl6-33 “链接 外 部 样式 表 ” 对 话 框 


05 | 单 击 对 话 框 中 的 “浏览 ”按钮 ， 选 择 已 创建 的 newcss. css 文 件 。 
06 选择 样式 表 的 添加 方式 。 本 例 选 择 “ 链 接 ”。 
如 果 选 择 “ 导 入 ”， 会 将 外 部 CSS 样 式 表 的 信息 包含 进 当前 文档 ， 而 “链接 ”选项 只 
该 取 和 传送 信息 ， 不 会 载 入 样式 信息 。 虽 然 “ 导 入 ”和 “链接 ”都 可 以 将 外 部 CSS 样 式 表 
中 的 所 有 样式 调用 到 当前 文档 中 , 但 “链接 ”可 以 提供 更 多 的 功能 ， 适用 的 浏览 器 也 更 多 。 
07 月 在“ 媒体” 下拉 列表 中 指定 样式 表 的 目标 媒介 。 本 例 不 作 选 择 。 
08. 单 击 “ 确 定 ” 按 钮 ， 将 所 需 的 样式 应 用 于 当前 页 面 。 
09 选中 文档 中 的 “ 林 清 辫 ”, 在 属性 面板 的 “链接 ”文本 框 中 键入 相应 的 链接 URL。 
10 保存 文档 ， 并 按 F12 快 捷 键 在 浏览 器 中 预 吃 页面。 
至 些 ， 外 部 样式 表 newcss. css 已 经 分 配给 当前 的 文 要 ， 效 果 如 图 6-34 上 所 示 。 
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有 有 阳 则 有 时 三 天 和 时下 天 ， 有 时 ARX. RB 上 


图 6-34 链接 外 部 规则 前 后 的 效 末 
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在 浏览 器 中 预览 该 页 面 时 , 链接 文本 显示 为 深 绿 色 ; 当 将 鼠标 指针 移 到 链接 文本 上 时 ， 
链接 文本 显示 为 红色 ， 且 字体 大 小 为 20 号 。 


[Llo. 4. 4 编辑 CSS 样 式 


Dreamweaver CS5 提 供 了 多 种 方式 对 样式 表 进 行 官 理 。 如 果 要 编辑 菜 个 样式 表 ， 请 执 
行 以 下 操作 之 一 : 

e 单 击 文本 属性 面板 左上 角 的 ics 按钮 ， 在 “目标 规 
则 ”下 拉 列 表 中 选择 要 编辑 的 CSS 样式 ， 然 后 单 击 
NN UP U 

e 执行 “窗口 ”/“CSS 样式 ”命令 打开 “CSS 样式 ” 面 
板 ， 在 样式 列表 中 双击 要 修改 的 样式 ; 

e 在 “CSS 样式 ”面板 中 选中 要 修改 的 样式 ,然后 单 击 “CSS 


单 击 这 一 列 , 可 以 op 


样式 ”面板 底部 的 编辑 样式 图 标 学， 打开 “CSS 规则 — 直接 修改 属性 值 
定义 ”对 话 框 ; 


e 执行 “窗口 ”/“CSS 样式 ”命令 打开 “CSS 样式 ” 面 
板 ， 单 击 面板 下 方 的 属性 值 ， 当 属性 值 区 域 变 为 可 顷 
辑 状态 时 ， 下 接 对 选中 的 属性 进行 修改 。 如 网 6-35 所 
"s 图 6-35 直接 修改 属性 值 
“CSS 规 则 定义 ”对 话 框 的 分 类 列表 中 共有 8 个 选项 ， 选 择 其 中 一 个 选项 时 ， 面 板 右 边 
会 显示 当前 选项 对 应 的 参数 。 
“类型 ”是 默认 的 选项 ， 主 要 用 于 定义 文本 的 相关 属性 ， 如 和 字体、 大小、 颜色 等 。 
“ 俏 景 ” 用 于 设置 背景 凑 色 和 背景 图 像 的 大 小 、 位 置 及 排列 方式 。 
“区 基 ” 用 于 调整 字 乙 间 、 有 字母 乙 间 的 间距 及 对 齐 方式 。 
“ 方 框 ” 用 于 设置 网 页 元 素 在 页 面 中 的 大 小 和 位 置 。 
“边框 ”用 于 设置 边框 的 样式 。 
“列表 ”用 于 设置 项 目 符 志 和 项 目 编号 的 外 观 及 位 置 。 
“定位 ”用 于 设 症 样式 在 网 页 中 的 具体 位 置 。 
“扩展 ”用 于 制作 一 些 特殊 效果 或 进行 一 些 特殊 操作 ， 如 打印 时 目 动 换 页 、 改 变 
眼 标 的 形状 、 对 文本 和 图 像 应 用 滤 锐 ， 等 等 。 


[6.4.5 实例 制作 一 一 创建 样式 表 


默认 状态 下 ， 超 级 链接 的 文本 显示 为 蓝 色 ， 并 标签 有 下 划 线 。 为 使 页 面 美观 ， 使 文本 
与 页 面 其 他 元 素 融 合 ， 个 人 网 站 实例 为 页 面 定义 了 样式 表 。 步 又 如 下 ; 

01 打开 将 作为 主页 的 index. html。 目 前 还 只 制作 了 导航 条 。 

02) 选择 “窗口 ”/“CSS 样 式 ”菜单 命令 ， 打 开 “CSS 样 式 ”面板 。 单 击 该 面板 右 下 
角 的 “新 建 CSS 规 则 ”图 标 按钮 召 ， 弹 出 “新 建 CSS 规 则 ”对 话 框 。 

03) 在 对 话 框 中 ， 选 择 CSS 样 式 的 类 型 为 “复合 内 容 ”， 并 在 “选择 器 名 称 ” 下 拉 列 
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表 中 选择 “a:1link”。 定 义 样式 的 位 置 选择 “新 建 样式 表 ”。 
04. 单 击 “确定 ”后 ， 在 弹出 的 对 话 框 中 将 样式 保存 为 newcss. css。 单 击 “ 确 定 ”， 
在 打开 的 “a:1ink 的 CSS 规 则 定义 ”对 话 框 中 设置 文本 的 闫 色 为 绿色 ， 无 修饰 。 
05 同 理 , 再 创建 一 个 样式 表 , 选择 右 为 a:hover, 定义 样式 的 位 置 选择 “newcss. css", 
^18, BITS. 
06 9 保存 文档 ， 并 按 F12 快 捷 键 在 浏览 右 中 预 钨 页面 。 
以 上 两 个 CSS 样 式 定 义 了 页 面 中 的 链接 文本 的 活动 状态 和 了 眼 标 指 针 经 过 时 的 状态 。 


HTML 文 档 中 的 CSS 样 式 不 仪 可 以 控制 大 多 数 传统 的 文本 格式 属性 ， 例 如 字体 、 字 号 和 
对 齐 方式 等 。 它 还 可 以 定义 一 些 特殊 的 HTML 属 性 ， 例 如 定位 、 特 别 效 末 和 鼠标 轮 奉 等 。 下 
面 通过 两 个 简单 的 实例 抛砖引玉 ， 演 示 CSS 样 式 的 强大 功能 。 


[Lije. 5.1 变化 的 鼠标 


在 网 页 中 ， 羽 标 指针 可 以 根据 需要 而 发 生 形 状 上 的 各 种 变化 。 例 如 ， 移 动 到 链接 文学 
上 时 ， 会 显示 为 手 形 ; 移 到 正文 上 时 ， 显 示 为 指针 。 通 过 一 个 简单 实例 演示 如 何 遂 过 CSS 
来 改变 展 标 的 样式 ， 使 忌 标 移 到 不 同 的 元 素 上 时 ， 显 示 不 同 的 形状 。 

01. 新 建 一 个 HTML 文 档 。 执 行 “ 修 改 ”/ “页 面 属性 ”命令 ， 弹 出 页 面 属性 对 话 框 。 
02. 单 击 “ 浏 览 ?按钮 选择 背景 图 像 。 由 于 背景 图 像 没 有 十 满 整 个 窗口 , Dreamweaver 
会 目 动 平 铺 〈 重 复 ) 背景 图 像 ， 如 图 6-36 所 示 。 
下 向 使 用 CSS 样 式 表 禁用 图 像 平 铺 。 
03. dT "fL" / "CSSEESX" d$, TIJF "CSSTESX TPSUIRUM- 


Fag 9 


图 6-36 ”网 像 平 铺 效 果 图 6-37 茶 用 图 像 平 铺 效果 


04. 单 击 “CSS 样 式 ” 面 板 上 的 “新 建 CSS 规 则 ”按钮 ， 在 弹出 的 “新 建 CSS 规 则 ”对 
话 框 的 “选择 右 类 型 ”下 拉 列 表 中 选择 “类 (可 应 用 于 任何 HTML 元 素 ) ”， 在 “选择 硕 名 
称 ” 文 本 框 中 键入 “.background”， 在 “规则 定义 ”下 拉 列 表 中 选择 “ 仅 限 该 文档 ”， 
然后 单 击 “确定 ” 投 钮 关闭 对 话 框 。 

05 胡 在 “CSS 样 式 定 义 ” 对 话 框 的 “分 类 ”列表 框 中 ， 选 择 “ 背 景 ”选项 。 蛙 击 “ 浏 
号 ”按钮 ， 选 择 图 像 文件 。 单 击 “ 重 复 ” 下 拉 列 表 框 下 拉 第 涉 ， 选 择 “ 不 重复 ”。 然后 
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Hah "auk" TEL. 

06 在 文档 窗口 的 状态 栏 中 右 击 pody》 标 签 ， 并 从 弹出 的 快捷 末 时 中 选择 “设置 类 ” 
子 来 单 中 的 .background。 应 用 样 陈 后 的 效果 如 图 6-37 所 示 。 

07 在 文档 窗口 中 输入 如 下 内 容 :; “鼠标 效 末 ”， 并 在 属性 面板 中 将 这 段 文 字 议 置 
为 一 级 标题 。 然 后 在 文档 窗口 中 输入 如 下 内 容 : “请 把 鼠标 移 到 相应 的 位 置 答 看 效 末 。” 

08 选择 “插入 ”/“ 布 局 对 象 ”/“AP Div” 命 令 ， 或 单 击 “布局 ”插入 面板 上 的 
“绘制 AP Div” 的 图 标 ， 在 文档 窗口 插入 4 个 AP 元 素 ， 在 对 应 的 属性 设置 面板 中 分 别 设置 
它们 的 “CSS-P 元 素 名 称 ” 设 置 为 apDivl、apDiv2、apDiv3 及 apDiv4。 

09 然后 在 4 个 AP 元 素 中 分 别 输入 “ 手 形 ”、“ 求 助 ”、“ 等 待 ” 及 “文本 ”， 通 过 
对 应 的 属性 设置 面板 设置 字体 大 小 为 13。 输 入 内 容 后 的 文档 显示 如 图 6-38 所 示 。 

10¢ 放 打开 “CSS 样 式 ” 面 板 。 单 击 该 面板 项 部 右边 的 三 角 按钮 ， 从 打开 的 下 拉 有 末 蛙 中 
选择 “新 建 CSS 样 式 ” 命 令 ， 弹 出 “新 建 CSS 样 式 ” 面 板 。 

11 量 在 该 面板 中 选择 “ID” 选 项 ， 然 后 在 “名 称 ” 文 本 框 中 输入 #HapDivl1， 最 后 选中 
面板 底部 的 “ 仅 限 该 文 当 ”选项 。 

本 例 选用 ID 选 择 右 , 所 以 输入 选择 需 名 称 时 , — áxE IPSE F 70384 PRBUIBITJJE S (#) 。 


鼠标 效果 


请 将 招标 移 到 相应 的 位 置 可 看 效果 


和 


| ——— L1 ———— 


图 6-38 ”文档 窗口 显示 效 来 

12 设置 完成 后 单 击 按 钮 “确定 ”进行 确认 ， 并 打开 “CSS 规 则 定义 ”对 话 框 。 单 击 
对 话 框 左 侧 “分 类 ”列表 框 中 的 “扩展 ”选项 ， 切 换 到 扩展 设置 面板 中 。 

13 肌 打开 “ 交 标 ”选项 后 面 的 下 拉 列 表 框 ， 选 择 hand， 表 示 当 鼠标 移动 到 该 文本 上 
时 变 为 手 的 形状 。 

14 贞 通过 同样 的 方法 为 其 他 3 个 AP 元 妹 设 置 对 应 的 鼠标 形状 。 

15 肌 设置 完成 后 单 击 “ 确 定 ” 按 钮 ， 进 行 确认 并 关闭 该 面板 ， 返 回 到 文档 窗口 。 打 
开 文 件 荣 单 ， 选 择 保 存 命令 ， 将 该 文档 保存 。 按 F12 键 进行 预览 网 页 ， 当 把 鼠标 移动 到 文 
子 “ 手 形 ” 上 时 ， 鼠 标 将 变 成 手 的 形状 ; 当 把 里 标 移动 到 其 他 文本 上 时 ， 鼠 标 将 变 为 对 应 
形状 。 

需要 注意 的 是 , 有 些 CSS 样 式 只 有 在 预 抠 时 才能 看 到 显示 效 末 , 例如 本 例 中 的 CSS 样 式 。 


[Lle.5.2. ”背景 不 跟随 内 容 滚 动 


很 多 网 页 设计 者 都 习惯 在 网 页 中 添加 背景 图 片 , 以 美化 页 面 。 当 网 页 内 容 超出 一 屏 时 ， 
拖 动 滚动 条 时 ， 背 景 图 片 会 与 页 面 内 容 相对 静止 地 一 起 滚动 ， 那 么 能 否 锁定 背景 不 跟随 内 
容 滚动 呢 ? 答案 是 肯定 的 。 下 面 就 通过 一 个 实例 演示 固定 网 页 背景 的 操作 步骤 。 
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01 朋 新 建 一 个 页 面 ， 然 后 单 击 “ 修 改 ”/ “页 面 属性 ”命令 ， 为 页 面 设 置 背景 图 像 。 

02 在 页 面 中 输入 需要 的 文本 内 容 。 然 后 打开 “CSS” 面 板 ， 单 击 面 板 右 下 角 的 “新 
建 CSS 规 则 ”图 标 ， 进 入 “新 建 CSS 规 则 ”对 话 框 。 

03 在 “选择 器 类 型 ”下 拉 列 表 选 择 “ 标 签 (重新 定义 特定 标签 的 外 观 ) ”， 在 “ 选 
择 嚣 名称” 下 拉 列 表 中 选择 “body”。 单 击 “ 确 定 ” 按 钮 打开 “body 的 CSS 规 则 定义 ”对 
话 框 。 


04 9 在 左 侧 的 “分 类 ”列表 中 选择 “背景 ”， 然 后 在 右 侧 的 参数 面板 中 设置 “附件 ” 
为 “国定 ”， 如 图 6-39 所 示 。 
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图 6-39 设置 “附件 ”参数 
05 保存 文档 。 按 F12 键 在 浏览 器 中 预 昂 页 面 效 果 。 如 图 6-40 所 示 。 


(O MANT - BUR [teclas] ET 
Er WE xA BHES dUCH | 工 风口 WCuo EBos | 年 戎 可 二 Du xi ap HE cA BE XC DIAC) Woo &Bos BANOD 
duo Oo &f-xu-i23-f»*4r58- zz 9 -m-cp E so OQ S'x-i-f» 9r mz € -m-Áí E 


| Wiüb d] nung cor RE EERT une Bu:- . uiu et mmm rd [| 


| 
Etwas 8 | tritt nm KUpsumP XRnes amus. 
Rex. on ui fi d 
3. Ji 


HTMI. C23. 
mmus. E 


于 
| moo 


ali icis — 
A 


1 本 Prva a 画 
这 些 国 上 关上 后 向 = Hur ud 
P RHEELIRHE Y | UEM I AT HI RIA [da m Cr 
HERPMEEHTUILT NM mREDMIBGE. Bruins mas e Man, NK RUE E 
MEEARRIS LA CUBE u P93in STER. 

z RPRHIMEiE: isyRMwIHMER i. "2! 

; &NHEGH S dis aic — RCUMTITNLEN | 
全 RRIERNES LIERTE "Spy Ted" B E U | 


Sd bor Wer SoesEECR EUR] oH AGRIS 
EUR NER Lo mesi uio) axi iini 
B HIP NLPHR- TotckMEERUGEepDM TEMERE. (CEREREM —— E. 


4 

5 TERCER "Tyr X t "Exud Address ELS ur 
EA ERE AR. "Bhr " xe 'Chag", RMUFIRSRBHÍE.. : 
SENS cem. RIGMENXS 

6 这 些 择 作 ， 和 
E 


| WoESERER T 
a ERUREMN rrmEEUNS. ite, 


上 * E. : * 
eme *03$92995 qTuagBrw m B*€T xw g x ES 前 .0 5.9959 TIBI € DW€U Ww Go c 


图 6-40 ”背景 固定 的 页 面 效果 
拖 动 浏览 占 窗 口 右 侧 的 深 动 条 ， 页 和 面 内 容 深 动 ， 但 页 面 痛 景 始终 保持 不 动 。 
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表格 和 AP 元 素 


在 网 页 设计 的 众多 环节 中 ,页面 布局 是 最 为 重要 的 环 
节 之 一 。 用 于 网 页 布局 设计 的 第 用 工具 是 表格 ， 它 不 但 能 
够 记载 表单 式 的 资料 .规范 各 种 数据 .输入 列表 式 的 文字 ， 
而 且 还 用 来 排列 文字 和 图 形 ; 它 还 可 以 与 AP 元 素 相 互 转 
换 ， 在 整个 网 页 元 素 空间 编排 上 都 发 挥 着 重要 的 作用 。 合 
理 布局 表格 , 会 使 网 页 更 具有 自己 的 个 性 特点 ， 又 便于 管 
理 和 修改 。 

AP 元 素 是 Dreamweaver 中 最 有 价值 的 对 象 之 一 。 所 请 
AP 元 素 ， 就 是 绝对 定位 元 素 ， 是 分 配 有 绝对 位 置 的 
HTML 页 面 元 素 ， 它 是 由 层 胎 样式 表 发 展 而 来 的 ， 由 于 
AP 元 素 可 以 放置 在 网 页 中 的 任何 位 置 ， 从 而 能 有 效 地 控 
制 网 页 中 的 对 象 。 
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创建 表格 

设置 表格 和 单元 格 属性 
表格 常用 操作 

表格 布局 实例 

创建 AP 元 素 

AP 元 素 常 用 操作 

AP 元 素 与 表格 相互 转换 
实例 制作 之 精确 定位 元 素 
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7. 1 创建 表格 


在 Dreamweaver 中 ， 利 用 表格 可 以 方便 地 将 数据 、 文 本 、 图 片 规范 显示 在 外 而 上 ， 使 
网 页 更 加 美观 、 有 条 理 。 在 HIML 中 ， 表 格 是 很 多 优秀 站 点 设计 的 整体 标准 ， 用 表格 格 却 化 
的 页 面 在 不 同 平台 ， 不 同 分 辩 率 的 浏览 右 里 都 能 保持 布局 和 对 齐 。 

人 不过， 表格 有 一 个 小 小 的 缺陷 : 它 会 使 网 页 显示 的 速度 变 慢 。 因 为 在 浏览 锅 中 ， 一 般 
的 文学 是 逐 行 显示 的 ， 即 从 服务 如 上 传 过 来 多 少 内 容 ， 束 显示 多 少 内 容 ， 以 方便 浏览 。 而 
使 用 表格 况 不 同 了 ， 表 格 一 定 要 等 到 整个 表格 的 内 容 全 部 下 载 完 成 之 后 ， 才 能 在 客户 站 的 
浏览 贷 上 显示 出 来 。 因 此 ， 在 多 重 明 套 的 表格 布局 中 ， 页 面 打 开 速 度 会 比较 慢 。 

尺 官 如 此 ， 表 格 在 网 页 布局 中 仍 扮演 看 很 重要 的 角色 ， 是 网 页 设计 者 必须 掌握 的 一 个 
强大 的 工具 。 下 面 介 绍 表格 一 些 常用 的 操作 。 


表格 由 三 个 基本 部 分 组 成 :， 行 、 列 和 单元 格 。 — Dam o 
在 表格 中 ， 被 线条 分 开 的 一 个 一 个 小 格 被 称 为 单元 17^ uma m | 
格 ， 其 中 可 插入 文字 、 图 像 等 对 象 ， 分 隔 单元 格 的 eis 
线条 被 称 为 边框 ， 位 于 水 平方 向 上 的 一 行 单元 格 称 S SEM 


作 一 行 ， 位 于 垂直 方向 上 的 一 列 单元 格 称 作 一 列 。 
单元 格 是 表格 的 基本 组 成 部 分 。 

下 面 以 在 网 页 中 插入 一 个 3 行 3 列 的 表格 为 例 ， 
泪 示 在 网 页 中 创建 一 个 表格 的 共 体 操作 步 又 。 本 例 


EIE 


执行 以 下 操作 : | 

01. dE "TRAC / "UEHQ" m ESGNDNGE | 已 两 wc | mm 
格 图标 按 钮 号 ， 或 选择 “插入 ”/“ 表 格 ” 荣 单 命 
令 ， 打 开 如 图 7-1 所 示 的 “表格 ”对 话 框 。 图 7-1 “表格 ”对 话 框 


02 旧 在 “ 行 数 ”文本 框 中 输入 表格 的 行 数 3。 在 “ 列 数 ”文本 框 中 输入 表格 列 数 3。 

03 旧 在 “表格 宽度 ”后 和 面 的 文本 框 中 键入 表格 的 宽度 ， 然 后 在 其 后 的 下 拉 列 表 框 中 
选择 计量 单位 。 如 末 选 择 的 单位 为 “百分比 ”， 则 会 按照 浏览 器 的 视窗 宽度 来 调整 表格 相 
对 的 百分比 宽度 。 本 例 为 默认 设置 。 

04 昌 在 “边框 狙 细 ”后 面 的 文本 框 中 输入 表格 的 边框 厚度 ， 以 像素 为 单位 。 设 置 为 0 
时 不 显示 边框 。 本 例 选 择 2。 
提示 : 在 “边框 粗细 ”文本 框 中 输入 的 是 表格 边框 的 宽度 ， 表 格 中 的 单元 格 的 边框 不 受 该 值 影响 。 如 宋 
要 在 “边框 ”设置 为 0 时 得 看 表格 的 边框 ， 请 选择 “得 看 ”/“ 可 视 化 助理 ”/ “表格 边框 ” 荣 单 命令 。 

05 用 在 “单元 格 边 距 ” 文 本 框 中 键入 单元 格 中 的 内 容 与 边框 的 间距 。 本 例 设置 为 2。 

06 肯 在 “单元 格 间距 ” 后 的 文本 框 中 键入 表格 中 单元 格 间 的 距离 ， 相 当 于 设置 单元 
格 的 边框 厚度 。 本 例 设置 为 2。 

07 旧 在 “页 眉 ” 往 选择 页 眉 显 示 方 式 ， 有 4 个 选项 分 别 是 : "Jo" . "JE". “项 部” 
和 “两 者 ”， 其 具体 效果 见 相应 的 图 标 。 本 例 选择 “无 ”。 

08 在 “标题 ”文本 框 输入 标题 “第 一 张 表 格 ”。 

09 旧 在“ 对齐 标题 ”后 面 的 下 拉 列 表 中 选择 表格 标题 的 对 齐 方式 : “顶部 ”标题 
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在 表格 上 方 ) 、“ 底 部 ” (标题 在 表格 下 方 ) 、“ 左 ” (标题 在 表格 左边 ) 、“ 右 ” ( 标 
题 在 表格 右边 ) 和 “默认 ” (标题 在 表格 上 方 即 同 “顶部 ”选项 ) 。 本 例 选择 “顶部 ”。 
10) 在 “摘要 ” 栏 键入 表格 的 说 明 等 信息 ， 对 表格 的 显示 无 影响 ， 
10) 单 击 “ 确 定 ”按钮 完成 插入 表格 ， 最 络 制作 结果 ， 如 图 7-2 所 示 。 


筝 一 张 表 格 
第 一 张 表 格 RE 
| 
图 7-2 插入 表格 KT-3 Hee 


提示 : 如 果 插 入 表格 时 对 行 、 列 及 单元 格 边 距 等 参数 进行 了 设置 ， 则 下 一 次 插入 表格 时 ，“ 表 格 ” 对 话 
框 将 保留 最 近 一 次 创建 表格 时 使 用 的 设置 。 

岗 套 表 格 技 术 可 以 实现 复杂 的 布局 设计 。 所 谓 般 套 表 格 ， 残 是 在 一 个 表格 的 单元 格 内 
包含 男 一 个 表格 。 可 以 像 对 非 航 套 表 格 一 样 对 骸 套 表格 进行 格式 设置 ， 但 是 ， 其 宽度 受 它 
所 在 单元 格 的 宽度 的 限制 。 

耕 要 在 表格 单元 格 中 骸 套 表格 ， 可 以 单 击 现 有 表格 中 的 一 个 单元 格 ， 再 在 单元 格 插入 
表格 。 例 如 ， 在 图 7-2 所 示 的 3 行 3 列 的 表格 的 中 则 单元 格 中 插入 一 个 2 行 3 列 的 表格 整形 成 
一 个 如 图 7-3 所 示 的 般 套 表格 。 

在 页 面 上 绘制 多 个 表格 或 能 套 表 格 时 ，Dreamweaver 目 动 控 制 ， 不 允许 表格 重 登 。 
提示 : 制作 符 套 表格 应 遵循 以 下 两 个 原则 : 

1、 从 外 同 内 工作 。 即 ， 先 建立 最 大 的 表格 ， 再 在 其 内 部 创建 较 小 的 表格 。 

2、 设 置 外 部 表格 的 宽度 时 使 用 绝对 值 ， 设 置 内 部 表格 的 宽度 时 使 用 相对 值 。 当 然 ， 这 不 是 一 个 不 容 改 变 
的 规则 ， 但 最 好 将 外 部 表格 宽度 设置 成 一 个 特定 的 绝对 像素 值 ， 而 将 内 部 表格 宽度 设置 为 相对 的 百分比 
数 ， 如 采 内 部 表格 宽度 也 设 为 一 个 绝对 的 像素 值 ， 那 么 表格 的 每 部 分 宽度 都 一 定 要 计算 精准 。 

在 文档 中 插入 表格 后 ， 可 以 在 表格 中 输入 各 种 数据 。 输 入 数据 或 插入 图 像 的 方法 是 先 
将 光标 放置 在 需要 插入 数据 的 单元 格 中 ， 然 后 直接 输入 数据 或 插入 网 像 即 可 。 
提示 : 在 表格 中 加 入 文本 后 ， 如 果 要 在 表格 文字 前 加 入 空格 ， 可 以 通过 组 合 键 Ctrl + Shift + Space 进 
行 输入 。 


选中 表格 或 单元 格 后 ， 即 可 在 对 应 的 属性 面板 上 修改 选 定 的 表格 元 素 的 属性 。 表 格 的 
属性 面板 中 的 绝 大 多 数 属性 与 “表格 ”对 话 框 中 的 参数 相同 。 下 面 简 要 介绍 一 些 没 有 介绍 
过 的 属性 。 选 中 表格 ， 执 行 “ 徐 口 ”/“ 属 性 ”命令 ， 展 开 表 格 属性 面板， 如 图 7-4 所 示 。 


属性 
[c 95 gGg3 NOx | [v amp? | TQ ka - RO - 9 
— w] Gs (EG  imqui 5 


Mk as ust 


"utum 
b 


图 7-4 表格 属性 面板 
对 表格 属性 面板 的 各 选项 功能 说 明 如 下 : 
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“表格 ”: 用 于 设 首 表格 的 名 称 。 

“ 行 ” 和 “ 列 ”: 用 于 设置 表格 的 行 数 和 列 数 。 

“ 宽 ”: 用 于 设置 表格 的 宽度 。 

“填充 ”: 用 于 设置 表格 内 单元 格 的 内 容 和 边框 的 间距 ， 即 “表格 ”对 话 框 中 的 “单元 
格 边 距 ”。 

“间距 ”: 用 于 设置 表格 内 单元 格 间 的 距离 ， 即 “表格 ”对 话 框 中 的 “单元 格 间距 ”。 

“对 齐 ”: 用 于 设置 表格 在 文档 中 相对 于 同一 段 党 中 的 其 他 元 每 (例如 文本 或 图 像 〉 的 
显示 位 置 。 

“类 ”; 用 于 设置 应 用 于 表格 的 CSS 样式 。 

“边框 ”: 设置 边框 的 宽度 。 

号 : 清除 列 宽 ， 单 击 此 按钮 将 表格 的 列 宽 压缩 到 最 小 值 ， 但 不 影响 单元 格 内 元 素 的 显示 。 
表格 在 请 除 列 宽 前 后 的 效 朱 如 图 7-5 所 示 。 


说 明 A. 说 明 备注 


表 头 | 说 明 备注 
123 qet54u76087p89 |25332 


qet54u76087p89 get5du76087p89 25332 


456 reuid6o w52 


reui96o 


I— 47 = 一 (—— —— — — — —— 206 v 
356 - 


图 7-5 ”清除 列 宽 前 后 图 7-6 清除 行 高 后 


im. 清除 行 高 ， 单 击 此 按钮 将 表格 的 行 高 压缩 到 最 小 值 ， 但 不 影响 单元 格 内 元 素 的 显示 。 
将 图 7-5 右 图 清除 行 蜗 后 的 效果 如 图 7-6 所 示 。 

包 :将 表格 宽度 的 单位 转化 为 像素 〈 即 固定 大 小 ) 。 

全 :将 表格 宽度 的 单位 转化 为 百分比 〈 即 相对 大 小 ) 。 

如 和 要 设置 单元 格 的 属性 ， 则 选中 单元 格 ， 执 行 “ 窒 口 ”/“ 属 性 ”命令 展开 单元 格 
属性 面板 进行 修改 ， 如 图 7-7 所 示 。 


属性 
| <> trmL| Tex x 四 类 无 v| BI i23 $5283 WR) 回 
ls css ID x v| SED vlen  B*so 区 
国 单元 格 ”水平 名 )| 默 认 v| 3500 不 换行 (0) *AREeOI. 页 面 属性 ... 
一 n3t  £€BOS v| 高 中 t8 D 口 " 
属性 
4» xr. 目标 规则 | backgr ound w| | 字体 四 ) | 默认 字体 "|BzESSB 回 
[Ba css | 编辑 规则 mec ||Xeim [v] m *oo ES 
--| 单元 格 ”水 平台) 默认 Iv| € 不 换行 0) 器 *AREeq d. mit... 
Cj 次 — SED ERA Ix| &00 标题 D [ ] P 


图 7-7 单元 格 属性 面板 
单元 格 属性 面板 分 为 如 图 7-7 所 示 的 HTML 和 CSS 两 个 面板 ， 每 一 个 面板 叉 分 为 两 部 分 。 
HTML 属 性 面板 的 上 部 分 几 于 设置 单元 格 内 文本 内 容 的 基本 属性 ， 各 选项 功能 不 再 次 述 请 
见 第 4 章 的 相应 部 分 )。 下 部 分 用 于 设置 单元 格 的 属性 ， 各 选项 功能 向 要 说 明 如 下 : 
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“水 平 ”: 设置 单元 格 内 容 的 水 平 对 齐 方式 。 

“垂直 ”: 设置 单元 格 内 容 的 垂 和 对齐 方式 。 

"Wo IUE" : 设置 单元 格 的 宽度 和 高 度 。 

“不 换行 ”: 单元 格 按 需 要 增加 列 宽 以 适应 文本 ， 而 不 是 在 狐 的 一 行 上 继续 文本 。 
“标题 ”: 设置 单元 格 为 标题 单元 格 。 标 题 单 元 格 内 的 文字 将 以 加 狂 黑 体 显 示 。 
"HORE : 用 于 设 管 单元 格 的 背景 鼎 色 。 


JE. 将 选 定单 元 格 拆 分 为 多 行 或 多 列 。 
HDreamweaver CS4 开 始 ， 用 户 不 能 直接 在 属性 面板 上 设置 表格 或 蛙 元 格 的 背景 图 像 
了 。 如 果 和 希望 将 图 像 设 置 为 表格 或 单元 格 的 背景 ， 就 要 用 到 表格 属性 的 CSS 设 置 面板 了 。 
下 和 面 通过 一 个 简单 实例 简要 介绍 在 Dreamweaver CS5 中 通过 新 建 CSS 规 则 设置 表格 和 单 
元 格 背景 图 像 的 一 般 操 作 步 又 。 
01. 执行 “插入 ”/ “表格 ”菜单 命令 ， 在 弹出 的 “表格 ”对 话 框 中 设置 表格 的 宽度 
为 300 像 素 ， 行 数 为 3， 列 数 也 为 3， 边 框 粗细 为 1。 
02 肯 将 光标 置 于 第 一 行 第 一 列 的 单元 格 中 ， 然 后 单 击 其 属性 面板 左上 角 的 Encss gu 
钮 ， 在 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规 则 ”， 并 单 击 “ 编 辑 规则 ”按钮 打开 “新 
建 CSS 规 则 ”对 话 框 。 
03 9 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “标签 ”，“ 选 择 嚣 名称” 选择 td，“ 规 则 
定义 ”选择 “ 仅 限 该 文档 ”。 然 后 单 击 “ 确 定 ” 按 钮 打开 对 应 的 规则 定义 对 话 框 。 
04 月 在 对 话 框 左 侧 的 “分 类 ”列表 中 选择 “背景 ”， 然 后 单 击 “ 背 景 图 像 ” 右 侧 的 
“浏览 ”按钮 ， 在 弹出 的 资源 对 话 框 中 选择 喜欢 的 背景 图 片 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 
框 。 
此 时 ， 在 文档 寄 口 中 可 以 看 到 表格 中 所 有 的 单元 格 都 自动 应 用 了 选择 的 背景 图 片 。 效 
果 如 图 7-8 所 示 。 


图 7-8 设置 单元 格 背 景 图 像 图 7-9 ”设置 单元 格 背 景 图 像 


如 果 希 望 不 同 的 单元 格 应 用 不 同 的 背景 图 像 ， 则 选中 要 设置 背景 图 像 的 蛙 元 格 之 后 ， 
在 上 述 步 又 中 的 第 03 的 “选择 融 关 型 ”下 拉 列 表 中 选择 “类 ”， 然 后 在 “选择 器 名 称 ” 
中 键入 名 称 ， 如 . packgroundl1。 效 果 如 图 7-9 所 示 。 

表格 的 行 和 列 的 属性 与 单元 格 的 属性 面板 一 样 ， 在 此 不 再 壮 述 。 
注意 : 使 用 属性 检查 器 更 改 表 格 和 其 元 素 的 属性 时 ， 需 要 注意 表格 格式 设置 的 优先 顺序 : 单元 格格 式 设 
置 优先 于 行 格式 设置 ， 行 格式 设置 又 优先 于 表格 格式 设置 。 例 如 ， 如 采 将 单个 单元 格 的 背景 颜色 设置 为 
蓝 色 ， 然 后 将 整个 表格 的 背景 颜色 设置 为 黄色 ， 则 蓝 色 单 元 格 不 会 变 为 黄色 ， 因 为 单元 格格 式 设 置 优先 
于 表格 格式 设置 。 
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Dreamweaver 的 表格 功能 影响 独 当 前 Web 页 设计 的 流行 趋势 。 拖 放 表 格 设置 尺寸 、 简 便 
的 行列 组 合 、 单 元 格 与 表格 的 复制 与 粘贴 ， 以 及 表格 数据 的 寻 入 导出 和 排序 ， 使 用 户 在 很 
短 的 时 间 内 完成 大 量 的 表格 任务 成 为 可 能 。 这 些 表格 编辑 特性 已 在 Dreamweaver 中 得 到 了 
很 大 的 体现 。 


[LL]. 3. 1 选择 表格 元 素 


在 对 表格 进行 操作 之 前 ， 必 须 先 选中 表格 元 素 。 在 Dreamweaver 中 ， 用 户 可 以 一 次 选 
中 整个 表格 、 一 行 表格 单元 、 一 列表 格 单元 或 者 几 个 连续 的 或 不 连续 的 表格 单元 。 下 面 分 
别 进行 说 明 : 

选择 表格 可 以 执行 以 下 操作 之 一 : 

CD 将 光标 放置 在 表格 的 任 一 单元 格 中 ， 然 后 单 击 文档 窗口 底部 的 *table> 标 记 ; 

Q2) 执行 “修改 ”/“ 表 格 ”/“ 选 择 表 格 ” 命 令 ; 

(3) 在 表格 的 边框 线 上 单 击 ; 

选取 了 整个 表格 之 后 ， 表 格 的 周围 会 出 现 黑色 的 探 柄 ， 如 图 7-10 所 示 。 

选择 一 行 或 一 列 单元 格 可 以 执行 以 下 操作 之 一 : 

CO 将 光标 放置 在 一 行 表格 单元 的 左边 界 上 ， 或 将 光标 放置 在 一 列表 格 单元 的 顶端 ， 
当 指 针 变 为 黑色 箭头 时 单 击 鼠 标 ; 

(2) 单 击 一 个 表格 单元 ， 横 癌 或 纵 癌 拖 动 鼠标 可 选择 一 行 或 一 列表 格 单元 。 

选中 一 行 和 一 行 表格 单元 的 效 末 如 图 7-11 所 示 。 


图 7-10 ”选中 整个 表格 图 7-11 选中 一 行 、 一 列表 格 单元 
选中 多 个 连续 的 表格 单元 
(D 蛙 击 一 个 表格 单元 ， 然 后 纵 同 或 横 同 拖 动 眼 标 到 男 一 个 表格 单元 ; 
(2) 单 击 一 个 表格 单元 ， 然 后 按 住 Shift 键 单 击 另 一 个 表格 单元 ， 所 有 和 矩 形 区 域内 的 表 
格 单元 都 被 选择 。 
选中 多 个 连续 的 表格 单元 后 的 效 末 如 图 7-12 上 所 示 。 
选中 多 个 不 连续 的 表格 单元 。 按 住 Ctrl 键 ， 单 击 多 个 要 选择 的 表格 单元 。 
选中 多 个 不 连续 的 表格 单元 后 的 效果 如 图 7-13 所 示 。 


图 7-12 ”选中 多 个 连续 表格 单元 图 7-13 ”选中 多 个 不 连续 表格 单元 
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[jr. 3. ”调整 表格 的 尺寸 、 行 高 和 列 帘 


在 网 页 制作 过 程 中 ， 调 整 表格 和 单元 格 的 大 小 是 经 常 性 的 操作 。 

1. 调整 表格 的 大 小 

选中 表格 后 ， 在 表格 周围 的 黑色 控 柄 上 按 下 岂 标 左 键 ， 并 沿 相 应 的 方 回 拖 动 ， 即 可 调 
整 表 格 的 大 小 。 

(1) 拖 动 右 下 角 的 手柄 ， 可 以 在 两 个 方向 上 同时 调整 表格 的 大 小 ; 

(2) 拖 动 表格 底 边 框 上 的 手柄 ， 可 以 调整 表格 的 高 度 ; 

(3) 拖 动 右边 框 上 的 手柄 ， 可 以 调整 表格 的 宽度 。 

当 调 整整 个 表格 大 小 时 ， 其 中 的 所 有 单元 格 大 小 会 按 比 例 进 行 缩 放 。 如 果 表 格 的 单元 
格 指定 了 明确 的 宽度 和 高 度 ， 则 调整 表格 大 小 会 在 文档 窗口 中 更 改 单元 格 的 可 视 大 小 ， 但 
不 会 更 改 这 些 单元 格 的 实际 宽度 和 高 度 。 

将 表格 的 宽度 或 高 度 减 到 最 小 。 

选择 整个 表格 ， 然 后 选择 “修改 ”/“ 表 格 ”/“ 清 除 单 元 格 宽度 ”或 “清除 单元 格 高 
度 ” 命 令 ， 对 所 有 单元 格 的 宽度 、 高 度 进 行 压 缩 ， 直 到 内 容 最 多 的 单元 格 与 上 下 左右 边界 
zn ARRA IE. 

2. 调整 行 高 

将 光标 放 在 行 的 底 边框 上 ， 当 鼠标 变 为 上 下 箭头 时 ， 拖 动 鼠 标 。 通 过 拖 动 行 的 底 边 线 
改变 行 的 高 度 时 ， 如 采 该 行 不 是 最 下 面 的 行 ， 则 相 邻 行 的 高 度 目 动 调 整 ， 使 表格 的 总 高 度 
不 变 ， 如 果 是 表格 的 最 下 面 的 行 ， 则 表格 的 总 高 度 发 生变 化 ， 所 有 行 按 比 例 变 高 或 变 罕 。 

3. 调整 列 宽 

将 光标 放 在 列 的 右边 框 上 ， 当 鼠标 变 为 左右 箭头 时 ， 拖 动 鼠 标 。 通 过 拖 动 列 的 右边 线 
改变 列 的 宽度 时 ， 如 果 该 列 不 是 最 右边 的 列 ， 则 相 邻 列 的 宽度 目 动 调整 ， 使 表格 的 总 宽度 
不 变 ， 如 果 是 表格 的 最 右边 列 ， 则 表格 的 总 宽度 发 生变 化 ， 所 有 列 按 比 例 变 宽 或 变 鹤 。 

转换 表格 单位 

选择 整个 表格 ， 然 后 选择 “修改 ”/“ 表 格 ”/“ 转 换 宽度 为 百分比 ”或 “转换 宽度 为 
像素 ”命令 ， 即 可 将 表格 的 宽度 转换 为 以 百分数 或 像素 为 单位 ， 同 理 转换 表格 的 高 度 。 

此 外 ， 用 户 还 可 以 通过 属性 面板 上 的 “ 宽 ” 和 “高 ”属性 设置 表格 的 大 小 、 行 高 及 列 


z: 


LL]. 3.3 使 用 扩展 表格 模式 


表格 是 在 标准 模式 下 直接 插入 的 ， 其 最 初 的 用 途 是 显示 表格 陈 数 据 。 虽 然 它 也 能 任意 
改变 大 小 和 行列 ， 但 在 页 面 中 编辑 表格 和 表格 中 的 数据 并 不 方便 。 在 本 市 中 ， 我 们 将 介绍 
Dreamweaver CS5 中 的 扩展 表格 模式 。“ 扩 展 表 格 ” 模 陈 临 时 癌 文 档 中 的 所 有 表格 添加 单 
元 格 边 距 和 间距 ， 并 且 增 加 表格 的 边框 以 使 编辑 操作 更 加 容易 。 

下 面 通过 一 个 简单 实例 演示 切换 到 表格 的 “扩展 ”模式 下 的 具体 操作 步骤 。 

01. 由 于 在 “代码” 视图 下 无 法 切换 到 表格 的 “扩展 ”模式 ， 所 以 应 完 将 当前 文档 
窗口 的 视图 切换 到 “设计 ”视图 或 “ 拆 分 ”视图 。 
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02. 在 文档 窗口 插入 一 个 表格 ， 如 图 7-14 所 示 。 

03 执行 以 下 操作 之 一 : 
e 执行 “ 奉 看 ”/“ 表 格 模式 ”/“ 扩 展 表 格 模 式 ” 来 单 命令 。 
e 按 下 Alt + F6 快捷 组 合 键 。 
e 在 “插入 ”面板 的 “布局 ”类 别 中 ， 单 击 “ 扩 展 ” 按 钮 ， 如 图 7-15 所 示 。 
d^. > 
a 

as 


DÀ spry 可 折 查 面板 


表格 
在 上 面 插 六 行 
- 在 下 面 插入 行 - 
图 7-14 标准 模式 下 的 表格 图 7-15 切换 到 扩展 模式 


此 时 ， 文 档 千 口 的 项 部 会 出 现 “ 扩 展 表 格 模 式 ” 标 记 ， 且 文档 窗口 工作 区 中 的 所 有 表 
格 上 自动 添加 了 单元 格 边 距 与 间距 ， 并 增加 了 表格 边框 。 如 图 7-16 所 示 。 

此 时 ， 利 用 扩展 模式 ， 用 户 可 以 选择 表格 中 的 项 目 或 者 精确 地 放置 插入 点 。 例 如 ， 用 
户 可 以 将 插入 点 放置 在 图 像 的 左边 或 石 边 ， 从 而 避免 无 意 中 选 中 该 图 像 或 表格 单元 格 。 
注意 : ”一 旦 选择 了 表格 中 的 某 个 对 象 或 放置 了 插入 点 ， 束 应 该 返回 到 “设计 ”视图 的 “标准 ”模式 下 进 
行 编辑 。 诸 如 调整 大 小 之 类 的 一 些 可 视 操作 在 “扩展 表格 ”模式 中 不 会 产生 预期 结果 。 

如 果 要 退出 扩展 表格 模式 ， 可 以 执行 以 下 操作 之 一 : 

e 单 击 文档 窗口 项 部 “扩展 表格 模式 ” 右 侧 的 “退出 ”。 

e 执行 “得 看 ”/“ 表 格 便 式 ”/“ 标 准 便 式 ” 沫 单 命令 。 

e 在 “插入 ”面板 的 “布局 ”类别 中 ， 单 击 “ 和 标准” 按钮。 

按 下 Alt + F6 快 捷 组 合 键 。 


"*|C:AInetpubVwwwrootiAUntitled-1.htal (XHINL)s [a x | 


扩展 表格 模式 [退出 ] 
EN 


HE 


4 了 <] 
n. 一 一 一 — 
body? [£57] (kd) QA 100$ v465 x 261» 123 K / 18 秒 Unicode (UTF- 


图 7-16 表格 的 扩展 模式 


LL]. 3. 4 表格 数据 的 导入 与 导出 


在 实际 工作 中 ， 有 时 需要 把 其 他 应 用 程序 〈 如 Microsoft ExcelO 建立 的 表格 数据 发 
布 到 网 上 。 如 果 重 新 在 Dreamweaver 中 插入 表格 和 数据 ， 可 以 想像 这 是 一 件 很 枯燥 、 烦 珊 
的 事 ， 如 果 表 格 数据 庞大 ， 势 必 人 花费 不 少时 间 和 精力 。 生 好 Dreamweaver 有 导入 表格 式 数 
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据 的 功能 ， 用 户 只 需要 把 表格 数据 保存 为 市 分 隅 符 格 式 的 数据 ， 然 后 导入 到 Dreamweaver 
中 ， 即 可 用 表格 重新 对 数据 进行 格式 化 ， 这 样 大 大 地 方便 了 网 页 制作 的 过 程 节省 了 制作 
表格 的 时 间 并 有 效 地 保证 数据 的 准确 性 。 同 样 ， 用 户 也 可 以 把 在 Dreamweaver 中 制作 好 的 
表格 数据 导出 为 文本 文件 。 

1. 导入 表格 式 数 据 

Dreamweaver 可 以 把 许多 应 用 程序 的 表格 数据 导入 并 生成 目 己 的 表格 ， 只 要 是 以 分 陋 
符 格 式 〈 如 制 表 符 、 喜 号 、 冒 号、 分 号 或 其 他 分 隔 符 ) 保存 的 数据 均 可 以 导入 其 中 ， 并 且 
重新 格式 化 为 表格 。 

下 面 通 过 一 个 实例 演示 将 文本 文件 数据 导入 为 表格 数据 的 具体 操作 。 

01 从 记事 本 中 创建 一 组 带 分 隔 符 格 式 的 数据 ， 如 图 7-17 所 示 。 

02 在 Dreamweaver 文 档 窗口 中 狐 建 一 个 文件 ， 然 后 执行 “文件 ”/“ 守 入 ”/“ 表 格 
式 数 据 ” 命 令 ， 弹 出 “导入 表格 式 数据 ”对 话 框 。 如 网 7-18 所 示 。 

03. 单 击 “ 数 据 文件 ”后 面 的 “浏览 ”按钮 ， 找 到 需要 导入 的 数据 源 文件 。 

04 在 “ 定 界 答 ” 下 拉 列 表 框 中 选择 数据 源 文件 数据 的 分 隔 方 式 。 本 例 选择 “ 逗 与 ”。 

如 果 选 择 了 “其 他 ”, 则 应 在 下 拉 列 表 框 右边 的 文本 框 中 输入 分 隔 表 格 数据 的 分 隔 符 。 


— 


- 导入 表格 式 数据 四 
局 tablel.txt - 记事 本 OO — 一 一 确定 
EAD 编辑 (E) 格式 (0) 查看 (六 ”帮助 (由 定 界 符 - 取消 

LP UE i: | 表格 宽度 : * Dues "m 
[LE 8 35, 48 eu a 
软件 而 a LU 5: 35 设置 为 : Bab !9Y 
单元 格 边 距 : 格式 化 首 行 : [[ 无 格式 。 qe 
WYTADRSEE M" Mie "a 1 
LL —— —— — — —-J 
图 7-17 数据 文件 图 7-18 “导入 表格 式 数 据 ” 对 话 框 


Hm: 如 末 不 指定 文件 所 使 用 的 分 隅 从 ， 文 件 将 不 能 正确 导入 ， 则 数据 也 不 能 在 表格 中 正确 格式 化 。 

05 几 在 “表格 宽度 ”区 域 设 置 表格 的 宽度 。 如 果 选 中 “匹配 内 容 ”， 则 跟 据 数据 长 度 
自动 决定 表格 宽度 。 如 果 选 中 “设置 为 ”， 则 可 在 右 侧 的 文本 框 中 输入 表格 宽度 数值 ， 并 
可 在 下 拉 列 表 中 选择 宽度 的 计量 单位 。 本 例 选 中 “匹配 内 容 ”。 

06 设置 单元 格 边 距 和 单元 格 间距 ， 并 将 边框 设置 为 1。 

07 在 “格式 化 首 行 ” 下 拉 列 表 中 选中 “ 粗 体 ”选项 。 

08. 单 击 “ 确 定 ” 按 钮 ， 即 可 导入 表格 数据 ， 效 果 如 图 7-19 所 示 。 

2， 导 出 表格 数据 

在 Dreamweaver 中 ， 还 可 以 将 表格 数据 导出 到 文本 文件 中 ， 相 邻 单元 格 的 内 容 由 分 陋 
从 隅 开 。 可 以 使 用 的 分 隔 符 有 逗号 、 则 号、 分 写 或 空格 。 导 出 必须 是 整个 表格 ， 不 能 选取 
表格 的 一 部 分 导出 。 如 果 只 需要 表格 中 的 某 些 数据 ， 则 应 创建 一 个 新 表格 ， 将 所 需要 的 信 
县 复制 到 新 表格 中 ， 再 将 新 表格 导出 。 

下 面 通过 一 个 简单 实例 演示 将 表格 数据 导出 为 文本 文件 的 其 体操 作 步 又 

01 在 Dreamweaver 文 档 窗 口中 创建 一 个 表格 , 并 在 表格 中 输入 数据 。 如 图 7-20 所 示 。 

02 将 光标 放置 在 该 表格 中 或 选中 该 表格 ， 然 后 执行 “文件 ”/“ 导 出 ”/ “表格 ” 
命令 ， 弹 出 “导出 表格 ”对 话 框 。 如 图 7-21 所 示 。 


| Fr E wa 
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03 旨 在 “ 定 界 符 ” 下 拉 列 表 框 中 选择 一 种 表格 数据 输出 到 文本 文件 后 的 分 隅 符 。 其 
中 “Tab” 表 示 使 用 制 表 和 从 作为 数据 的 分 隅 符 ， 该 项 是 默认 设置 ，“ 空 日 键 ”表示 使 用 空 
格 作为 数据 的 分 隅 答 ，“ 逗 点 ”表示 使 用 去 写作 为 数据 的 分 阳 从 ， “分 写 ” 表 示 使 用 分 写 
作为 数据 的 分 陋 符 ，“ 冒号 ”表示 使 用 冒号 作为 数据 的 分 隔 符 。 本 例 使 用 的 认 设置 。 


产品 名 称 型 号 报价 
名 称 定价 | 数量 三 星 | SGH-E908 | 2599 
信息 系统 设计 与 开发 35 48 三 星 | SGH-iT18 | 4950 
Serra 21 35 
系统 设计 师 教 程 52 49 
图 7-19 ”导入 数据 后 的 效果 图 7-20 ”表格 数据 


04 9 在 “换行 符 ” 下 拉 列 表 框 中 选择 一 种 表格 数据 输出 到 文本 文件 后 的 换行 方式 。 
其 中 “Windows ”表示 按 Windows 系 统 格式 换行 ，“Mac” 表 示 按 平 果 公司 的 系统 格式 换行 ; 
“UNIX” 表 示 按 UNIX 的 系统 格式 换行 。 本 例 使 用 默认 设置 。 

05 设置 完成 之 后 ， 单 击 “ 导 出 ”按钮 ， 弹 出 “表格 导出 为 ”对 话 框 。 在 你 存 文件 窗 
口中 输入 一 个 文件 名 ， 可 以 不 使 用 扩展 名 ， 也 可 以 使 用 一 个 文本 类 型 的 扩展 名 ， 本 例 键入 
tablel. txt。 单 击 “ 保 在” 投 钮 完成 表格 数据 导出 。 

06 9 使 用 “记事 本 ”应 用 程序 打开 该 文件 ， 内 容 如 图 7-22 所 示 。 


gm o 3. tablei.txt - 记事 本 OO 
文件 (E) 编辑 (E) 格式 (Q) 查看 (WW EB 
eme. — CE ene s B4 0p 
z 取消 三 星 SGH-E9 88 2599 
uid BET ws 99 
y sEBh WedEUE N73 3399 
诺基亚 ”N95 8888 


图 7-21 表格 数据 图 7-22 表格 数据 文件 


[[17.3.5. 增加 、 删 除 行 和 列 


1. 执行 以 下 方法 之 一 删除 一 行 
(1) 将 光标 定位 于 要 删除 行 中 任 一 单元 格 中 ， 执 行 “修改 ”/“ 表 格 ”/“ 删 除 行 ”命令 。 
(2) 将 光标 放置 在 指定 行 的 左边 弄 上 ， 当 黑色 鼻头 出 现时 单 击 鼠 标 选 中 该 行 ， 然 后 投 
Delete 键 删除 行 。 
(30 右 击 要 删除 行 中 任 一 单元 格 ， 在 弹出 的 快捷 沫 单 中 执行 “表格 ”/ “删除 行 ”命令 。 
2. 执行 以 下 方法 之 一 删除 一 列 
(1) 把 光标 定位 于 要 删除 列 中 任 一 单元 格 中 ， 执 行 “修改 ”/“ 表 格 ”/“ 删 除 列 ”命令 。 
(2) 将 光标 放置 在 指定 列 的 上 边界 上 ， 当 黑色 鼻头 出 现时 单 击 鼠 标 选 中 该 列 ， 然 后 投 
Delete 键 删除 列 。 
(30 右 击 要 删除 列 中 任 一 单元 格 ， 在 弹出 的 快捷 荣 单 中 执行 “表格 ”/ “删除 列 ” 命 令 。 
3. 执行 以 下 方法 之 一 增加 一 行 
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(1) 将 光标 定位 于 茶 一 个 单元 格 中 ， 执 行 “ 修 改 ”/“ 表 格 ”/“ 插 入 行 ” 命 令 。 

(2) 执行 “插入 ”/“ 表 格 对 象 ”/“ 在 上 面 插入 行 ” 命 令 ， 插 入 一 行 。 

(30 右 击 单元 格 ， 在 弹出 的 上 下 文 菜单 中 执行 “表格 ”/“ 搬 入 行 ”命令 ， 插 入 一 行 。 
4. 执行 以 下 方法 之 一 增加 一 列 

(1) 将 光标 定位 于 单元 格 中 ， 执 行 “ 修 改 ”/“ 表 格 ”/“ 插 入 列 ” 合 令 ， 插 入 一 空 列 。 
(2) 执行 “插入 ”/“ 表 格 对 象 ”/“ 在 左边 插入 列 ” 命 令 ， 插 入 一 空 列 。 

(30 右 击 单元 格 ， 在 弹出 的 上 下 文 染 单 中 执行 “表格 ”/“ 捅 入 列 ” 命 令 ， 皇 入 一 空 列 。 


[Lr. 3.6 复制、 粘贴 与 清除 单元 格 


在 Dreamweaver CS5 中 ， 用 户 可 以 非常 灵活 地 复制 及 粘贴 单元 格 ， 并 保留 这 些 单 元 格 
的 格式 ， 也 可 以 只 复制 和 糙 贴 单元 格 中 的 内 容 。 可 以 一 次 只 复制 及 粘贴 一 个 单元 格 ， 也 可 
以 一 次 复制 及 粘贴 一 行 、 一 列 乃 至 多 行 多 列 单元 格 。 

下 面 简 要 介绍 复制 、 粘 贴 单 元 格 内 容 的 操作 步骤 。 

(1) 选择 表格 中 的 一 个 或 多 个 单元 格 。 所 选 的 单元 格 必 须 是 连续 的 ， 并 且 形 状 必须 
ARE e 

(2) 鼠标 右 击 选中 的 单元 格 ， 在 弹出 的 上 下 文 菜 单 中 执行 “复制 ”命令 。 

(3) 选择 要 粘贴 单元 格 的 位 置 。 

1) 硅 要 用 在 副 贴 板 的 单元 格 瞧 换 现 有 的 日 元 格 ， 应 选择 一 组 与 一 贴 板 上 的 单元 格 具 有 相 
同 布局 的 现 有 蛙 元 格 。 例 如 ， 如 果 复 制 或 梳 切 了 一 块 3X2 的 单元 格 ， 则 可 以 选择 为 一 块 3X2 
的 单元 格 通 过 精 贴 进行 蔡 换 。 

2) 大 要 在 特定 单元 格 所 在 行 粘贴 一 整 行 单元 格 ， 则 单 击 该 单元 格 。 

3) 在 要 在 特定 单元 格 左 侧 烙 贴 一 整 列 单元 格 ， 则 单 击 该 单元 格 。 

4) 右 要 用 精 贴 的 单元 格 创建 一 个 独 表 格 ， 则 将 插入 点 放置 在 表格 之 外 。 

(4) 把 光标 定位 于 日 标 表 格 的 持 元 中 ， 鼠 标 右 击 目标 单元 格 ， 在 弹出 的 上 下 文 来 早 
中 执行 “粘贴 ”命令 ， 完 成 粘贴 。 

在 精 贴 多 个 单元 格 时 ， 喜 贴 板 中 的 内 容 必 须 和 烙 贴 目的 地 的 表格 或 表格 中 选择 段 的 结 
构 是 相同 的 ， 否 则 将 弹出 一 个 对 话 框 ， 提 示 无 法 完成 粘贴 操作 。 
注意 : 如 果 邢 贴 板 中 的 单元 格 不 到 一 整 行 或 一 整 列 ， 并 且 单 击 某 个 单元 格 然 后 粘贴 本 贴 板 中 的 单元 格 ， 
则 所 单 击 的 单元 格 和 与 它 相 邻 的 单元 格 可 能 《根据 它们 在 表格 中 的 位 置 ) 被 粘贴 的 单元 格 蔡 换 。 

右 要 清除 单元 格 中 的 内 容 ， 可 以 执行 以 下 操作 步骤 : 

(10 选择 一 个 或 多 个 单元 格 中 的 内 容 ， 且 这 些 单元 格 不 构成 一 行 或 一 列 。 

(2) 执行“ 编辑”/ “清除 ” 沫 单 命 令 ， 或 特 接 按 Delete 键 。 

如 条 选 定 的 多 个 单元 格 为 一 行 或 一 列 ， 则 执行 上 述 操作 后 ， 将 从 表格 中 删除 整个 行 或 
列 ， 而 不 仅仅 是 单元 格 中 的 内 容 。 


[L]r.3. 7 合并 、 折 分 单元 格 
在 一 般 的 情况 下 ， 表 格 纵横 方 回 单元 格 的 大 小 一 致 ， 而 在 网 页 设计 中 ， 表 格 的 布局 是 
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多 样 的 ， 所 以 必须 对 其 中 的 一 些 单 元 格 进行 合并 或 拆 分 。 在 Dreamweaver 中 ， 可 以 合并 任 
意 数 量 的 相 令 单元 格 ， 但 整个 选中 区 域 必须 是 矩形 的 ， 也 可 以 将 一 个 单元 格 拆 分 为 任意 数 
量 的 行 或 者 列 。 
下 面 就 通过 一 个 简单 实例 来 演示 这 些 操作 的 有 具体 步骤 

01. 在 文档 中 插入 如 图 7-23 所 示 的 表格 。 

02 肯 选中 所 要 合并 的 单元 格 “ 合 并 ”和 “单元 格 ”。 

03 自 通过 以 下 方法 之 一 合并 选中 的 单元 格 : 

(1) 单 击 属性 面板 中 的 号 按钮， 合并 单元 格 。 

(2) 执行 “修改 ”/“ 表 格 ”/“ 合 并 单元 格 ” 命 令 ， 合 并 单元 格 。 

(3) 鼠标 右 击 选 中 的 单元 格 ， 在 弹出 的 上 下 文 荣 单 中 执行 “表格 ”/“ 合 并 单元 格 ” 命 


令 ， 合 并 单元 格 。 
操作 以 上 操作 之 一 后 ， 原 来 的 两 个 竺 元 格 束 合并 为 一 个 ， 如 图 7-24 所 示 。 


.04 同样 办 法 合并 单元 格 “Dreamweaver ”和 “5C$5”， 操 作 的 结果 如 图 7-25 上 所 示 。 


图 7-24 合并 单元 格 


图 7-23 ”插入 表格 
05 光标 定位 于 “ 折 分 单元 格 ” 单 元 格 ， 通 过 以 下 方法 之 一 打开 “ 拆 分 单元 格 ” 对 话 
框 ， 如 图 7-26 所 示 。 
单 击 属性 面板 中 的 站 按钮 ， 拆 分 单元 格 。 
执行 “修改 ”/“ 表 格 ”/“ 拆 分 单元 格 ” 命 令 ， 拆 分 单元 格 。 
眼 标 右 击 选中 的 单元 格 ， 在 弹出 的 上 下 文 末 单 中 执行 “表格 ”/“ 拆 分 单元 格 ”命令 ， 拆 
分 单元 格 。 
06. 在 对 话 框 中 选择 “把 单元 格 拆 分 为 列 ”， 在 “ 列 数 ” 文 本 框 中 输入 2。 单 击 “ 确 
定 ” 完 成 单元 格 拆 分 ， 结 果 如 图 7-27 所 示 。 
@ 


r 
拆 分 单元 格 


图 7-26 “ 拆 分 单元 格 ” 对 话 杠 


图 7-25 合并 单元 格 (2) 


EE MEM 4 20 80H 05 
DreamweaverCSS | 23 | 24 |  DreamweaverCSS |23 
EN EM II no 折 分 单元 属 0m 
41 DIY 教 程 [43 | 44 | 41 | Dr 教程 |43 


图 7-27 拆 分 单元 格 图 7-28 增加 列 宽 的 效果 


调整 行 或 列 的 跨度 也 可 以 实现 合并 、 拆 分 表格 的 效果 。 增 加 行 或 列 的 跨度 束 是 
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将 邻近 的 单元 格 的 行 或 列 合 并 ， 使 选中 单元 格 的 高 或 宽 扩 展 到 原来 的 两 倍 ; 减少 行 或 列 的 
跨度 ， 束 是 将 邻近 单元 格 的 行 或 列 进行 拆 分 ， 使 选中 单元 格 的 高 或 宽 缩 小 到 诛 来 的 一 半 。 
07 光标 定位 于 14 单 元 格 ， 然 后 选择 “修改 ”/“ 表 格 ”/“ 增 加 行 宽 ” 命 令 ， 即 可 
将 14 和 24 单 元 格 合并 。 同 理 ， 再 次 执行 “增加 行 宽 ” 命 令 两 次 ， 即 可 将 表格 最 右 列 合并 为 
一 列 ， 效 果 如 图 7-28 所 示 。 
08 将 光标 定位 于 “ 拆 分 单元 格 ” 单 元 格 ， 然 后 选择 “修改 ”/“ 表 格 ”/“ 增 加 行 


宽 ” 命 令 ， 即 可 将 “ 拆 分 单元 格 ” 和 其 右 侧 相 邻 的 单元 格 合并 。 同 理 ， 再 次 执行 “增加 列 
宽 ” 命 令 两 次 ， 即 可 将 表格 第 三 行 的 前 三 个 单元 格 合并 为 一 行 ， 效 果 如 疼 7-29 所 示 。 
00 ?3wMEUB 13 
| DreamweaverC 55 | 23 


”31 折 分 单元 格 3 0 
| 41 | Dry 教程 ”|43 


图 7-29 增加 行 宽 效果 


[Lr 3. 8 表格 数据 排序 


在 表格 中 输入 内 容 时 ， 和 常常 需要 对 表格 数据 进行 排序 。Dreamweaver 提 供 了 表格 排序 
的 功能 ， 可 以 对 一 个 基于 单列 内 容 的 简单 表格 排序 ， 也 可 以 对 基于 双 列 内 容 的 较为 复杂 的 
表格 排 友 。 但 是 不 能 排 友 那些 包含 colspan 或 者 rowspan 属 性 的 表格 ， 也 束 是 那些 包含 有 合 
并 单元 格 的 表格 。 

下 和 面 以 一 个 实例 来 演示 表格 排序 的 具体 的 步 缀 。 

01 将 光标 放置 在 需要 排序 的 表格 中 ， 然 后 选择 “命令 ”/“ 排 序 表 格 ” 命 令 ， 打开 
“排序 表格 ”对 话 框 ， 如 图 7-30 所 示 。 

02 肯 在 “排序 按 ” 下 拉 列 表 框 选择 需要 进行 排序 的 列 。 本 例 选择 “ 列 3”。 

03 目 在“ 顺序” 下拉 列 表 框 中 设置 表格 内 容 排 序列 顺序 。 其 后 的 下 拉 列 表 框 中 有 两 
个 选项 ， 其 中 “升序 ”表示 按 字 母 或 数字 升序 排列 ; “降序 ”表示 按 字 母 或 数字 降序 排列 。 
本 例 选择 “ 按 数 罕 顺 序 ” 且 “升序 ”。 


r 


排序 表格 @ 
EE E 
Im — ge —— m (| EM 
|— Hi 
me[ 05 Bg ES NN 
顺序 : [ 按 字 让 — (gu ^ 1g 
选项 : 0 排序 包含 第 一 行 
排序 标题 行 
排序 脚注 行 
完成 排序 后 所 有 行 颜色 保持 不 变 


图 7-30 “排序 表格 ”对 话 框 


04 在 “再 按 ” 下 拉 列 表 框 中 选择 第 二 个 需要 进行 排序 的 列 。 本 例 选 择 “ 列 4”,“ 按 
数字 顺序 ” 且 “ 降 序 ”。 
05 有 由 如 采 第 一 行 不 是 标题 ， 可 以 选中 “排序 包 侣 第 一 行 ”， 表 示 排 序 时 包括 第 一 行 。 
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iic i 
coe 单 击 “确定 ”按钮 ， 完 成 操作 。 排 序 前 后 的 表格 如 网 7-31 所 示 。 


产品 名 称 \ 销 量 第 一 和 李 度 第 二 季度 第 三 李 度 | 第 四 季度 


产品 名 称 \ 销 量 。 | 第 一 季度 | 第 二 季度 | 第 二 季度。 | 第 四 季度 
1 
| | x | 5$ [| M [| 9 | 


图 7-31 ”排序 前 后 的 表格 


技巧 : 当 列 的 内 容 是 数字 时 ， 选 择 “ 按 数字 顺序 ”。 如 果 按 字母 顺序 对 一 组 由 一 位 或 两 位 数组 成 的 数字 
进行 排序 ， iniri pi qun (排序 结果 如 1. 10. 2. 20. 3. 300 ， 而 不 是 将 它们 作 
为 数字 进行 排序 (排序 结果 如 1、 10、20、30) 。 


在 Dreamweaver 中 ， 表 格 主 要 应 用 于 网 页 布局 和 内 容 定 位 上 。 下 面 通 过 一 个 实例 来 让 
读者 更 清楚 地 认识 表格 布局 的 操作 方法 。 

和 F010 新 建 一 个 HIML 文 要 ， 并 设置 其 背景 图 像 。 

£02. 单 击 “ 利 用 ”面板 上 的 国 按 钮 ， 在 文档 中 插入 一 个 2 行 1 列 、 宽 度 为 750 像 素 的 表 
格 。 然 后 在 属性 面板 上 设置 表格 的 对 齐 方式 为 “居中 对 齐 ”。 

^03. 选取 表格 第 二 行 的 单元 格 ， 单 击 属性 面板 中 的 拆 分 按钮 王将 其 拆 分 为 两 行 。 

4943 选取 表格 的 第 二 行 ， 按 照 上 一 步 的 方法 将 其 拆 分 为 5 列 。 

05 将 光标 定位 在 表格 的 第 三 行 中 ， 单 击 “ 常 用 ”面板 上 的 “插入 表格 ”图 标 ， 插 
入 一 个 一 行 两 列 的 表格 。 

^06 将 光标 放 在 花 套 表格 左 侧 的 单元 格 中 ， 单 击 属 性 面板 上 的 拆 分 按钮 ， 将 单元 格 
拆 分 为 3 行 。 此 时 绘制 出 的 表格 决定 了 网 页 的 基本 布局 ， 如 网 7-32 上 所 示 。 


Qodyy [WI Q 10*  .esTu3e1K/1M 


图 7-32 ”表格 布局 
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07 在 表格 最 上 面 的 单元 格 中 插入 一 幅 图 片 ， 效 果 如 图 7-33 所 示 。 
08 选中 第 三 行 的 所 有 单元 格 ， 单 击 属性 面板 上 的 | 用 css 按钮， 然后 在 “目标 规则 ” 
下 拉 列 表 中 选择 “新 CSS 规 则 ”， 然 后 单 击 “ 编 辑 规则 ”按钮 打开 规则 定义 对 话 框 。 
09 在 “选择 器 其 型 ”下 拉 列 表 中 选择 “类 ”, 在 “选择 器 名 称 ” 中 键入 . fontcolor， 
在 “规则 定义 ”下 拉 列 表 中 选择 “ 仪 限 该 文档 ”。 单 击 “ 确 定 ” 按 钮 打开 对 应 的 规则 定义 
对 话 框 。 
10 贞 在 对 话 框 左 侧 的 分 类 列表 中 选择 “背景 颜色 ”， 单 击 颜色 井 右 下 角 的 下 拉 箭 头 ， 
在 弹出 的 颜色 面板 中 选择 绿色 。 
和 11 在 对 话 框 左 侧 的 分 类 列表 中 选择 “类 型 ”， 单 击 颜 色 井 右 下 角 的 下 拉 箭 头 ， 在 
弹出 的 颜色 面板 中 选择 白色 。 
1427 在 对 话 框 左 侧 的 分 类 列表 中 选择 “区 块 ”, 在 “文本 对 齐 ” 下 拉 列 表 中 选择 “局 
中 ”。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 
13 贞 在 第 二 行 单元 格 中 输入 导航 标题 ， 此 时 的 页 面 效果 如 岁 7-34 上 所 示 。 


图 7-33 ”插入 网 页 标题 图 像 图 7-34 在 单元 格 中 输入 内 容 
1 选取 左下 角 的 单元 格 ， 按 照 第 〈8) 到 〈10) 的 步骤 新 建 一 个 CSS 规 则 ， 为 单元 


KC ELTS A AR 
-15 在 单元 格 中 键入 页 面 分 栏 内 容 ,， SADECBERECSS JUN] Uc EE CAS s CR üt ETT-35 
PES 


图 7-35 ”插入 单元 格 背景 及 文本 
16 浊 在 右 下 和 角 的 单元 格 中 输入 文本 ， 并 设置 文本 的 格式 。 
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17. PRAE OC, JH PFIZRE, RU WT BUALISI SLT ER UR. og 36 上 所 示 。 


图 7-36 网 页 制作 最 终 效 末 


本 例 主要 讲解 表格 布局 页 面 的 方法 ， 所 以 页 面 中 的 链接 文本 并 没有 设置 。 有 兴趣 的 读 
者 可 以 进一步 完善 该 实例 。 


在 前 和 面 的 儿童 中， 已 制作 了 个 人 网 站 实例 的 导航 条 、“ 伊 人 风尚 ”页 和 面 ， 并 创建 了 页 
面 样式 表 。 本 克 将 使 用 表格 制作 主页 。 步 又 如 下 : 

和 019 打开 个 人 网 站 实例 的 主页 index. html ， 将 光标 定位 在 页 面 顶端 ， 单 击 属性 面板 
上 的 “居中 对 齐 ” 按 钮 二 。 

ELo2 单 击 “ 常 用 ”面板 上 的 表格 图 标 按钮 ， 在 打开 的 “表格 ”对 话 框 中 设置 表格 的 
行 效 为 2， 列 数 为 1， 表 格 宽 度 为 700 像 系 ， 边 框 为 0。 单 击 “确定 ”按钮 插入 一 个 2 行 1 列 的 
表格 。 

203. 将 光标 定位 在 第 一 行 的 单元 格 中 ， 在 其 属性 面板 上 将 其 单元 格 内 容 的 水 平 对 齐 
方 却 设置 为 “居中 对 草 ”。 人 然后 单 击 “ 币 用 ”面板 上 的 网 像 独 标 按钮 ， 在 打开 的 对 话 框 中 
选择 Pee 单 击 “ 人 确定” 按钮 插入 图 像 。 

册 04 和 将 光标 定位 在 第 三 行 的 单元 格 中 ， 单 击 属性 面板 上 的 拆 分 单元 格 按钮 小 ， 在 打 
开 的 “ 拆 分 单元 格 ” 对 话 框 中 ， 选 择 “ 列 ”， 且 “ 列 数 ” 为 2。 单 击 “确定 ”按钮 ， 将 第 
二 行 拆 分 为 两 列 。 

EL05 有 将 光标 放置 在 第 一 行 第 一 列 的 单元 格 中 ， 在 其 属性 面板 上 设置 其 宽度 为 200 像 
素 。 然 后 在 “水 平 ” 下 拉 列 表 中 设置 其 单元 格 内 容 的 对 齐 方式 为 居中 对 齐 。 此 时 的 页 面 效 
末 如 图 7-37 所 示 。 


部 脱 风声 


Fw 
es PE YP 


图 7-37 网 页 效果 
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06. 将 已 制作 的 导 和 条 皇 入 第 一 行 第 一 列 的 单元 格 中 ， 如 图 7-38 所 示 。 


y? Li sepul dung neri nnd (REIR 


E ee —€————— n nl 
Dod Ouable* Cr [h]fs Q p  vTZ3 a dETe DERE Z6 M 


图 7-38 插入 导航 条 的 效果 


07 将 光标 定位 在 第 二 行 第 二 列 的 单元 格 中 ， 单 击 “ 香 用 ”面板 上 的 表格 网 标 按钮 ， 
在 打开 的 “表格 ”对 话 框 中 设置 表格 的 行 数 为 4， 列 数 为 1， 表 格 宽度 为 500 像 素 ， 边 框 为 0。 
单 击 “ 确 定 ” 按 钮 插入 一 个 4 行 1 列 的 表格 。 

08. 将 光标 定位 在 第 一 行 的 单元 格 中 ， 在 其 属性 面板 上 ， 将 单元 格 内 容 的 水 平 对 章 
方式 设置 为 “居中 对 齐 ”。 

09. 单 击 属性 面板 上 的 | Ee css | 按钮， 然后 在 “目标 规则 ”下 拉 列 表 中 选择 “新 CSS 规 
则 ”， 然 后 单 击 “ 编 辑 规则 ”按钮 打开 规则 定义 对 话 框 。 

10 在 “选择 器 类 型 ”下 拉 列 表 中 选择 “类 ”, 在 “选择 器 名 称 ” 中 键入 . fontstyle, 
在 “规则 定义 ”下 拉 列 表 中 选择 “ 仪 限 该 文档 ”， 然 后 日 击 确 定 按 钮 打开 对 应 的 规则 定义 
对 话 框 。 

11 旧 在 对 话 框 左 侧 的 分 类 列表 中 选择 “类 型 ”， 然 后 在 “字体 ”下 拉 列 表 中 选择 
“编辑 字体 列表 ”， 在 弹出 的 “编辑 字体 列表 ”对 话 框 右 下 角 的 “可 用 字体 ”列表 框 中 选 
择 “ 方 正 粗 倩 简体 ”。 然 后 单 击 图 按钮 将 其 添加 到 字体 列表 中 ， 并 单 击 “ 确 定 ” 按 钮 关闭 
对 话 框 。 

12 9 在 规则 定义 对 话 框 的 “学 体 ” 下 拉 列 表 中 选择 “方正 粗 倩 简体 ”， 在 “学 号 ” 
下 拉 列 表 中 选择 “特大 ”， 然 后 单 击 颜色 井 右 下 角 的 下 拉 往 头 ， 在 弹出 的 颜色 面板 中 选择 
#686868。 单 击 “ 人 确定 ”按钮 关闭 对 话 框 。 

13 在 第 一 行 里 元 格 中 输入 文本 “欢迎 光临 我 的 小 屋 ”。 

14 将 光标 放置 在 输入 的 文本 后 ， 然 后 按 下 Shift + Enter 组 合 键 插入 一 个 软 回 车 。 

15. 单 击 “ 常 用 ”面板 上 的 图 像 图 标 按钮 ， 在 打开 的 对 话 框 中 选择 一 条 水 平分 割 线 ， 
单 击 “确定 ”按钮 插入 图 像 。 此 时 的 效果 如 图 7-39 所 示 。 


欢迎 光临 我 的 小 屋 


图 7-39 插入 文本 和 分 割 线 的 效果 
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16 选中 第 二 行 的 单元 格 ， 单 击 “ 常 用 ”面板 上 的 图 像 图 标 控 钮 ， 在 打开 的 对 话 框 
中 选择 已 在 图 像 编辑 软件 中 制作 好 的 图 片 ， 单 击 “确定 ” 投 钮 插入 网 像 ， 效 末 如 疼 7-40 所 
未 。 


欢 四 光量 我 的 小 屋 


MMSSSSSSSSASASSSSSSSSSASASASASSSSSSASASASASSSSSSASSASASASSSSASSSASSSSSASASASSSSASSSSSASSASASSSSSSASSSSSSSSASSASSASSASSSSSSSSSSSASASSSA 


心 若 没 有 楼 息 的 地 方 
到 哪里 都 是 在 流浪 


e 


图 7-40 插入 图 片 的 效果 


17 将 光标 定位 在 第 三 行 的 单元 格 中 ， 单 击 “常用 ”面板 上 的 图 像 图 标 按钮 ， 在 打 
开 的 对 话 框 中 选择 已 制作 好 的 水 平分 割 图 片 ， 单 击 “确定 ”按钮 插入 图 像 。 

18 在 第 四 行 的 单元 格 中 输入 文本 ， 并 新 建 一 个 CSS 规 则 设置 文本 颜色 为 #333333 
然后 选中 文本 ， 双 击 “CSS 样 式 ”面板 中 “所 选 内 容 的 摘要 ”列表 中 的 属性 值 。 打 开 “CSS 
规则 定义 ”对 话 框 。 

19 有 在 “分 类 ”中 选择 “区 块 ”， 并 在 “文本 对 齐 ” 下 拉 列 表 中 选择 “居中 ”。 然 
后 单 击 “ 应 用 ”按钮 应 用 样式 ， 单 击 “ 确 定 ”按钮 关闭 对 话 框 。 

20) 单 击 文档 窗口 顶部 的 “代码 ”按钮 ， 切 换 到 代码 视图 ， 在 选中 的 代码 之 前 添加 
以 下 代码 : 


<marquee “behavior= scroll direction= up” hspace= 0” height= 120 


vspace-" 10^ 


^" 


loop- -1^ scrollamount- 1^ scrolldelay-^60^» 


如 图 7-41 上 所 示 。 


75. CAInetpub'blog'index.html (XHTML)* ie [6] @ 
z sp an c 


eight- align- 
"STYLE4"> 欢 迎 光临 我 的 小 屋 < jspan><br /> 
<imyg src-"images/090.qgif" width-"496" height-"29" <ASpan><7 


9 td 

tt «tr» 

kn <tr> 

本 «td height-"292" align-s"center"»«img src- 

ce "images/200542313154753935 ÜhxRJjK70018.gif" width-" 486" height-"255" /»«br /> 
Mi «img src-"images/27 4200 l07.gif" width-"482" height-"37" /»«/td» 
E/tr» 

A «tr» 

ES xtd height-"247" align-s"center"- | 
《> 


本 «p class-"STYLE2"-PIMPil Duecbr /> 
Xbr /> 

TENRPEGERDUS Henr /> 

"i «br /> 

3B Ea3xmB-—Ip E EHebr /> 


:> Ctable? Ctr? <td> mmtemplate: editable> (table? Ctr) (td 1K/154$ | 


图 7-41 ”添加 代码 


21 在 选中 的 代码 末尾 加 上 《</marquee>。 然 后 单 击 “ 设 计 ” 切 换 到 “设计 ”视图 。 
22 保存 文 要 ， 并 按 Fl12 键 在 浏览 右 中 预览 效果 。 如 图 7-42 所 示 。 
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正文 区 域 确 部 的 文本 同上 循环 移动 ， 形 成 跑马 灯 效 来。 


Jd 6 P. Jp e i2 s ms € um" 


TEERSICRE RUE E 
TB 158 2.58090 — IRAE TERR 


图 7-42 主页 正文 区 域 预 览 效 果 


AP 元 素 在 很 多 的 绘图 软件 和 图 像 软 件 中 都 有 相应 的 定义 ， 同 样 在 Dreamweaver 中 也 有 
自己 相应 的 定义 ， 只 不 过 Dreamweaver 将 其 进行 了 可 视 化 操作 。 利 用 Dreamweaver， 用 户 可 
以 在 不 进行 任何 JavaScript 或 HTML 编 码 的 情况 下 控制 AP 元 系 是 显示 还 是 隐藏 ; 配合 行为 的 使 
用 ， 还 可 轻松 制作 出 动态 效果 。 此 外 ，AP 元 素 还 可 以 和 表格 互相 转换 ， 将 AP 元 素 和 表格 综 
舍利 用 起 来 ， 可 以 更 好 地 实现 图 文 混 排 。 

简 而 言 之 ，Dreamweaver CS5 中 的 AP 元 素 有 如 下 优点 : 

1， 能 够 精确 定位 

在 页 面 中 搬入 一 个 AP 元 素 之 后 ， 可 以 很 方便 地 在 属性 设置 面板 中 指定 它 的 大 小 及 在 页 
面 中 的 绝对 坐标 ， 并 且 AP 元 素 与 AP 元 素 之 间 的 定位 也 相当 精确 ， 几 乎 可 以 不 通过 属性 栏 ， 
直接 用 有 眼 观看 就 可 以 了 。 

2. 插入 目 如 

在 页 面 的 某 处 插入 一 段 文本 或 一 幅 图 片 ， 如 果 用 表格 来 实现 ， 可 能 会 将 表格 拆 分 得 乱 
七 八 糟 , 最 后 还 可 能 因 定 位 不 好 , EDU Vic P DURAS RELAIS 如 果 用 AP 元 素 束 方便 多 了 ， 
随便 画 一 个 AP 元 素 ， 可 以 插入 任何 网 页 对 象 ， 然 后 拖 到 合适 的 地 方 ， 绝 对 精确 ! 

3. 加 速 浏览 

这 一 点 是 相对 表格 而 言 的 。 有 本 章 开 头 我 们 提 到 过 ， 在 匡 浏 览 器 中 ， 一 个 表格 只 有 完 
全 被 下 载 完 之 后 ， 才 能 显示 其 内 容 ， 如 果 这 个 表格 很 大 ， 或 租 套 的 层次 比较 复杂 ， 往 往 会 
让 浏览 者 长 时 间 等 待 。 运 用 AP 元 素 制 作 的 网 页 可 以 进行 像素 级 的 定位 ， 并 且 使 用 不 同 版 本 
的 浏 pe 问题 。 

可 车 加 
es E 重 羞 的， 而 AP 元 素 可 以 重 早 。 利 用 这 一 特性 ， 可 以 达到 各 种 微妙 的 效果 。 
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例如 ， 可 以 在 一 个 AP 元 素 中 放置 背景 图 像 ， 然 后 在 该 AP 元 素 的 前 面 放置 第 二 个 AP 元 素 ， 它 包 
合 带 有 透明 背景 的 文本 。 这 样 束 可 以 制作 AP 元 素 渐 入 和 渐 出 的 动画 。 

在 Dreamweaver 中 可 以 使 用 插入 、 拖 动 等 多 种 方法 创建 AP 元 素 和 髋 和 僚 AP 元 素 。 所 谓 航 
依 AP 元 素 ， 了 驶 是 在 一 个 AP 元 素 中 的 AP 元 素 ， 花 人 套 的 人 元 素 随 看 父 AP 元 素 移 动 并 且 继 承 父 AP 
元 素 的 可 见 性 。 下 面 通过 一 个 简单 实例 演示 在 文档 中 创建 亿 元 素 和 内 套 AP 元 素 的 具体 步 


Je 


01 新 建 一 个 HTML 文 档 。 设 置 好 页 面 属性 后 ， 单 击 “ 插 入 ”面板 上 的 “布局 ”标签 ， 
切换 到 “布局 ”面板 。 

02^ 单 击 “布局 ”面板 中 的 “绘制 AP Div” 图 标 盟 ， 此 时 鼠标 将 会 变 成 十 形状 。 

03 在 文档 窗口 中 需要 插入 AP 元 素 的 位 置 ， 按 下 鼠标 左 键 拖 出 一 个 矩形 AP 元 素 。 如 
图 7-43 所 示 。 

用 户 也 可 以 将 光标 放置 在 文档 窗口 中 需要 插入 AP 元 素 的 位 置 , 然后 执行 “插入 ”/“ 布 
局 对 象 ”/“AP Div” 菜 单 命令 ， 插 入 一 个 默认 大 小 的 AP 元 素 。 
技巧 : 如 果 和 需要 绘制 多 个 AP 元 系 ， 在 单 击 “ 绘 制 AP Div” 图 标 之 后 ， 按 住 Ctrl 键 的 同时 在 文档 窗口 中 
绘制 一 个 AP 元 素 ， 只 要 不 释放 Ctrl 键 ， 就 可 以 连续 绘制 多 个 AP 元 素 。 

04 Z2 CESAPZUAR S HE LÁ MUT 

Q 在 “首先 参数” 对话 框 中 启用 AP 元 素 嵌 套 功能 ， 并 确保 “AP 元素 ”面板 上 的 “ 防 
止 重 关 ” 复 选 框 没有 选中 ， 然 后 将 光标 放置 在 已 绘制 的 AP 元 素 内 部 ， 用 本 例 前 三 个 步骤 的 
方法 绘制 一 个 AP 元 素 ， 新 绘制 的 AP 元 素 将 自动 嵌 套 在 先 创建 的 AP 元 素 中 。 

默认 情况 下 ， 在 “首选 参数 ”对 话 框 中 禁用 了 AP 元 素 柑 套 功 能 ， 可 以 采用 接 下 来 的 第 
二 种 方式 。 

介 在 绘制 子 AP 元 素 的 同时 ， 按 下 A1t 键 。 先 创建 的 AP 元 素 成 为 父 AP 元 素 ， 在 父 AP 元 素 


内 创建 的 AP 元 际 成 为 子 AP 元 素 。 如 图 7-44 所 示 。 
[..—] 
| 


0 


图 7-43 ”绘制 的 AP 元 素 图 7-44  HWCEHINAPZUZS 


此 外 ， 用 户 还 可 以 将 多 个 已 存在 的 AP 元 素 变 为 退 僚 AP 元 系 。 

名 执行 “窗口 ”/“AP 元 素 ” 菜 单 命令 ， 调 出 “AP 元 素 ” 管 理 面 板 。 然 后 在 AP 元 素 列 
表 中 选中 将 作为 子 元 素 的 AP 元 素 ， 按 住 Ctrl1 键 将 该 AP 元 素 拖 动 到 父 AP 元 素 上 ， 释 放 鼠 标 即 
可 ， 如 图 7-45 所 示 。 

在 “AP 元 素 ” 管 理 面 板 中 可 以 看 出 apDiv2 是 apDivl 的 子 元 素 ，apDiv3 是 apDiv2 的 子 元 
素 。 如 图 7-46 所 示 。 

与 Dreamweaver 中 的 其 他 对 象 一 样 ， 在 设计 视图 中 选中 了 一 个 AP 元 素 后 ， 即 可 在 属性 
面板 上 修改 AP 元 素 的 外 观 ， 如 网 7-47 所 示 。 
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-| apDivi 
C apDiv2 
L apIiv3 


图 7-45 ”将 apDiv3 拖 至 apDiv2 上 图 7-46 藤 套 AP 元 素 在 管理 面板 的 显示 
REPE B à 
r1 CSS-P 元 素 e(l) 368px EQUO 164px — ZRAD 1 背景 图 像 (D Q so!|!x me 
[ES sivi (v| Een ssp. QD 52px| — RIMEdefedlk [v] FABER [ & 


uh |v| Ex a 


dz 下 


图 7-47 AP 元素 属性 设置 面板 


该 面板 中 各 个 属性 的 作用 简要 介绍 如 下 : 

“CSS-P 元 素 ”: 用 于 设置 AP 元 素 的 名 字 ， 名 池上 只 能 使 用 页 文字 母 及 数字 ， 且 只 能 使 用 
字母 开头 。 

“ 左 ” 和 “上 ”: 用 于 指定 AP 元 素 的 左边 框 〈《 和 顶部 ) 相对 于 页 面 或 父 AP 元 素 的 位 置 。 

ja" RM "mE": 分 别 用 于 指定 AP URS 98 SEU ROI e 

“Z 轴 ”: 用 于 指定 AP 元 素 的 2- 编写 (或 堆 千 顺序 号 ) 。 

Z 轴 编号 较 大 的 AP 元 素 出 现在 编号 较 小 的 AP 元 素 的 上 面 。 编 号 可 以 为 正 数 ， 可 以 为 负 
数 ， 也 可 以 是 0(。 如 果 AP 元 素 不 重 登 ， 则 该 值 没有 实际 用 途 ， 可 以 在 AP 元 素 管理 面板 中 修 
改 AP 元 素 的 序列 值 。 

“可 见 性 ”: 用 于 控制 AP 元 素 的 初始 显示 状态 。 可 使 用 脚本 语言 (如 JavaScript) 控制 
AP 元 又 的 可 元 竹 和 动态 显示 AP 元 素 的 内 容 。 

该 属性 有 4 个 选项 ， 其 中 “Default” 表 示 不 指定 AP 元 素 的 可 见 性 属性 ， 但 多 数 浏 览 需 
把 该 项 默认 为 “Inherit”( 继 承 );“Inherit” 表 示 继 承 父 AP 元 素 的 可 见 性 属性 ;“Visible” 
表示 显示 AP 元 素 的 内 容 ， 忽 略 父 AP 元 素 是 否 可 见 ; “Hidden” 表 示 隐 藏 AP 元 素 的 内 容 ， 忽 
略 父 AP 元 又 是 耕 可 见 。 

“背景 网 像 ” 和 “背景 颜色 ”: 分 别 用 于 设置 AP 元 素 的 背景 图 像 。 

“类 ”: 用 于 设置 AP 元 素 中 的 内 容 所 使 用 的 CSS 样式 。 

"iir: 用 于 设置 AP 元 素 的 内 容 超 过 了 它 的 大 小 以 何 种 方式 进行 显示 。 

该 选项 仅 适 用 于 CSS AP 元 素 。 有 以 下 4 个 选项 : 

(1) Visible: 表示 增加 AP 元 素 的 大 小 ，AP 元 妹 同 下 或 同 右 扩大 ， 以 便 AP 元 素 的 所 有 
内 容 都 可 见 ; 

(2) Hidden: 表示 保持 AP 元 素 的 大 小 ， 并 勇 切 反超 出 AP 元 素 范 围 的 任何 内 容 ， 不 显 
不 深 动 条 ; 

(3) Scroll: 表示 给 AP 元 素 添加 滚动 条 ， 不 管内 容 是 否 超过 了 AP 元 素 的 大 小 ， 特 别 

通过 提供 滚动 条 来 避免 在 动态 环境 中 显示 和 不 显示 滚动 条 导致 的 混乱 ; 

(4) Default: 表示 在 AP 元 素 的 内 容 超过 它 的 边界 时 目 动 显示 深 动 条 。 
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注意 ;如果 AP 元 素 的 内 容 超过 指定 大 小 ，AP 元 素 的 底 边 缘 会 延伸 以 容纳 这 些 内 容 。 当 AP 元 素 在 浏览 器 
中 出 现时 ， 如 果 AP 元 素 的 “溢出 ”属性 没有 设置 为 “visiple”， 那 么 底 边 缘 将 不 会 延伸 ， 超 出 的 那 部 
分 内 容 将 自动 被 剪 切 掉 。 

"BTRI" : 用 于 设置 AP 元 素 的 可 见 区 域 ， 指 定 左 侧 、 项 部 、 石 侧 和 的 边 坐 标 可 在 AP 元 
素 的 坐标 空间 中 定义 一 个 矩形 〈 从 A 元 素 的 左上 角 开 始 计 算 ) 。 

AP 元 素 经 过 “ 勇 辑 ”后 ， 只 有 指定 的 窍 形 区 域 才 是 可 见 的 。 这 些 值 都 是 相对 于 AP 元 丢 


本 号 ， 不 是 相对 于 文档 窗口 或 其 他 对 象 。 


在 Dreamweaver 某 个 页 面 中 创建 的 所 有 AP 元 素 都 显示 在 “AP 元 素 ” 和 面板 中 ， 这 为 用 
户 提供 了 一 种 对 网 页 的 对 象 进行 有 效 控制 的 手段 。 

执行 “窗口 ”/“AP 元 素 ” 沫 单 命 令 ， 即 可 以 打开 AP 元 素 管 理 面 板 ， 如 图 7-47 所 示 。 

AP 元 素 显 示 为 按 Z 轴 顺序 排列 的 名 称 列 表 。 若 创建 AP 元 素 时 使 用 AP 元 素 的 默认 属性 ， 
则 首先 创建 的 AP 元 素 出 现在 列表 的 底部 ， 最 后 创建 的 AP 元 素 出 现在 列表 的 项 部。 内 套 的 AP 
元 素 显 示 为 连接 到 父 AP 元 素 的 名 称 。 

默认 情况 下 ，AP 元 素 可 以 重 骆 。 如 果 在 AP 元 素 管理 面板 中 选择 了 “防止 重 着 ” 复 选 框 ， 
则 绘制 、 拖 动 AP 元 素 时 无 法 使 AP 元 素 重 辣 。 如 果 是 在 创建 AP 元 素 之 后 才 选 中 此 选项 ， 则 不 
影响 已 重 车 的 AP 元 素 。 

此 外 ， 读 者 需要 注意 的 是 ， 即 使 选择 了 “防止 重 早 ” 复 选 框 ， 有 些 操 作 也 可 能 导致 两 
个 AP 元 素 重 登 。 例 如 ， 使 用 染 单 插入 AP 元 素 ， 修 改 AP 元 素 的 边 距 ， 都 有 可 能 导致 AP 元 素 重 
登 加 或 对 依 ， 此 时 需要 在 文档 寄 口 中 拖 动 重 登 的 AP 元 素 ， 使 它们 分 离 。 

使 用 “AP 元 素 ” 面 板 还 可 以 更 改 AP z6z&Hyn] TE, ECESMIEE AP 元 素 ， 以 及 选 
择 一 个 或 多 个 AP 元 素 等 。 下 面 分 别 进行 说 明 。 


[Ll 7.1. 激活 、 选 择 AP 元 素 


如 果 需 要 在 AP 元 素 中 插入 对 象 ， 必 须 先 激活 AP 元 素 。 将 鼠标 在 AP 元 素 内 的 任何 地 方 单 
击 ， 即 可 激活 AP 元 素 。 此 时 ， 插 入 点 位 于 AP 元 素 内 。 被 激活 AP 元 素 的 边界 突出 显示 ， 选 择 
手柄 名 也 同时 显示 出 来 ， 如 图 7-48 所 示 。 最 后 选中 的 AP 元 素 


图 7-48 激活 的 AP 元 素 图 7-49 选中 的 AP 元 素 图 7-50 ”选中 的 多 个 AP 元 素 
提示 : 激活 AP 元 素 的 操作 不 等 于 选择 AP 元 素 。 
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如 条 要 对 AP 元 素 进行 移动 、 调 整 大 小 等 操作 ， 必 须 先 选中 AP 元 素 。 选 择 AP 元 素 可 以 分 
为 选择 一 个 AP 元 素 和 选择 多 个 AP 元 素 ， 它 们 的 操作 不 尽 相 同 ， 下 面 分 别 进行 介绍 。 

1. 选择 一 个 AP 元 素 

要 选择 一 个 AP 元 素 可 使 用 如 下 方法 之 一 : 

在 “AP 元 系 ” 面 板 中 单 击 该 AP 元 素 的 名 称 。 

单 击 一 个 AP 元 素 的 选择 柄 中 。 如 果 “ 选 择 柄 ”不 可 见 ， 可 在 该 AP 元 素 中 的 任意 位 置 单 
击 以 显示 该 选项 柄 。 

单 击 一 个 AP 元 素 的 边框 。 

在 设计 视图 底部 单 击 AP 元 素 的 标签 ， 它 表示 AP 元 素 在 HTML 代码 中 的 位 置 。 如 果 AP 元 
素 代码 标记 不 可 见 ， 执 行 “ 查 看 ”/“ 可 视 化 助理 ”/“ 不 可 见 元 素 ” 合 令 。 

选中 后 的 AP 元 素 边 框 上 会 出 现实 心 的 更 色 和 手柄 ， 如 图 7-49 所 示 。 

2. 选择 多 个 AP 元 素 

有 了 时 需要 对 多 个 AP 元 素 进行 操作 ， 比 如 使 多 个 AP 元 素 顶 部 对 齐 ， 或 使 它们 的 宽度 和 融 
度 相 同 ， 就 需要 选择 多 个 AP 元 素 。 如 果 要 选择 多 个 AP 元 素 ， 可 执行 以 下 操作 之 一 : 

先 在 文档 窗口 中 选择 一 个 AP 元 素 ， 然 后 按 住 Shift 键 ， 再 用 鼠标 单 击 其 他 AP 元 素 的 边 
框 ， 则 可 以 同时 选择 多 个 AP 元 素 。 

调 出 AP 元 素 管理 面板 ， 先 用 鼠标 选择 一 个 AP 元 素 的 名 字 ， 然 后 按 住 Shift 键 ， 再 用 鼠 
标 单 击 其 他 AP 元 素 的 名 字 ， 则 也 可 以 同时 选择 多 个 AP 元 素 。 

当 多 个 AP 元 素 被 选择 时 ， 最 后 选择 的 AP 元 素 的 手柄 以 实心 突出 显示 ， 其 他 AP 元 素 的 手 
柄 以 至 心 显 示 ， 如 网 7-50 所 示 。 


[7. 7. 2 移动 、 对 齐 、 复 制 AP 元 素 


在 使 用 AP 元 素 布 局 页 看 时 ， 常 需要 移动 和 对 齐 AP 元 系 。 下 和 而 简要 介绍 这 些 操作 。 

在 要 在 文档 窗口 中 移动 一 个 AP 元 系 ， 可 执行 以 下 操作 之 一 : 

先 选择 一 个 AP 元 素 ， 然 后 在 该 AP 元 素 的 选择 手柄 加 上 按 下 鼠标 左 键 并 拖 动 鼠标 ， 即 可 
移动 AP 元 妹 。 也 可 以 选中 AP 元 素 之 后 ， 控 键盘 上 的 方向 键 一 个 一 个 像 篆 地 移动 AP 元 素 。 

将 眠 标 指 针 移 动 到 需要 移动 的 AP 元 对 的 边框 上 ， 档 鼠标 指针 形状 变 为 4 个 箭头 时 ， 按 住 
限 标 左 键 拖 动 有限 标 ， 即 可 以 移动 AP 元 系 。 

在 设计 视图 选中 要 移动 的 AP 元 么 ， 然 后 在 属性 设置 面板 中 设置 其 “下 ”、“ 上 ”属性 的 
数值 。 
技巧 : 如 果 选 择 了 多 个 AP 元 素 ， 在 任 一 个 被 选择 的 AP 元 素 的 手柄 上 按 下 鼠标 左 键 并 拖 动 ， 可 移动 所 有 
选中 的 AP 76028. DUE TSH I HORE AP 元 素 ， 则 没有 选择 的 子 元 素 也 会 因 其 父 元 素 的 移动 而 移动 。 

使 用 “修改 ”A/“ 排 列 顺序 ” 子 末 里 下 的 “ 左 对 章 ”、“ 右 对 齐 ”、“ 对 齐 上 缘 ” 或 

“对 齐 下 缘 ” 等 对 齐 命令 ， 可 以 按 指 定 方式 对 齐 选 中 的 多 个 AP 元 素 。 

例如 ， 对 图 7-51 左 图 中 的 AP 元 素 执 行 “ 顶 对 章 ” 命 令 后 的 效果 如 图 7-51 右 图 所 示 。 

在 文档 窗口 中 ， 使 用 网 格 也 可 以 精确 定位 AP 元 素 。 如 果 启 用 了 网 格 的 吸附 功能 ， 则 在 
移动 AP 元 素 时 ，AP 元 取 目 动 与 最 近 的 网 格 线 对 章 。 如 果 选 择 了 “防止 蕴 辣 ” 复 选 框 ， 且 吸 
附 功 能 可 能 导致 网 个 AP 元 系 重 登 ， 则 AP 元 素 不 是 被 吸附 到 网 格 ， 而 是 家 吸附 到 最 靠近 的 AP 
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[e Untitled-1 (XHTML)* Oeo fs Untitled-1 (XHTML)* Occo 


图 7-51 AP 元 素 顶 对 齐 前 后 的 效 末 
选择 要 复制 的 AP 元 票 ， 执 行 “编辑 ”/“ 找 贝 ” 命 令 。 然 后 取消 被 选择 的 AP 元 系 ， 并 
执行 “编辑 ”A/“ 烙 贴 ”命令 ， 即 可 完成 操作 。 
注意 : 复制 AP 元 素 时 , AP 元 素 内 所 有 的 对 象 也 一 起 被 复制 , 且 被 复制 的 AP 元 素 会 与 原来 的 AP ZUR EC, 
需要 通过 移动 操作 将 它们 分 离 。 


E 
€body? Cdi vitapDiv3) 


LLIz. 7. 3 调整 AP 元 素 的 尺寸 


在 文档 窗口 中 对 AP 元 系 进 行 操作 时 ， 第 第 需要 调整 AP 元 素 的 大 小 。 在 Dreamweaver 中 ， 
可 以 通过 拖 动 调整 单个 AP 元 素 的 大 小 ， 也 可 以 荣 单 命令 同时 调整 多 个 AP 元 素 的 大 小 以 使 其 
有 具有 相同 的 宽度 和 高 度 。 

手工 拖 动 调整 AP 元 素 的 大 小 比较 方便 。 选 中 AP 元 素 后 ， 将 忌 标 指针 移动 到 AP 元 素 边 杠 
上 的 瘟 色 实心 手柄 上 ， 当 鼠标 指针 变 为 垂直 或 水 平 双 向 箭头 时 ， 按 住 鼠 标 左 键 拖 动 鼠标 ， 
可 以 调整 AP 元 素 的 高 度 或 宽度 ;， 当 鼠标 指针 变 为 斜 问 双 箭头 时 ， 按 住 鼠 标 左 键 斜 癌 上 或 斜 
回 下 拖拉 鼠标 ， 则 可 以 同时 调整 AP 元 素 的 高 度 及 宽度 。 这 种 方式 比较 难以 准确 地 确定 AP 元 


素 的 大 小 。 
在 AP 元 系 的 属性 设 症 面板 中 直接 设置 属性 宽 和 高 的 具体 数值 ， 可 以 比较 疹 确 地 确定 AP 
JURA. 


如 果 要 同时 调整 多 个 AP 元 素 的 大 小 ， 使 其 具有 相同 的 冤 度 和 高 度 ， 可 以 选中 多 个 AP 元 
系 之 后 ， 执 行 “ 修 改 ”/“ 排 列 顺序 ”/“ 设 成 冤 度 相同 ”或 “ 设 成 而 度 相 同 ” 六 时 命令 。 
该 操作 可 将 所 有 选 定 的 AP 元 素 调整 为 最 后 一 个 选 定 的 AP 元 系 〈 手 柄 以 瘟 色 实心 突出 显示 D 
的 宽度 或 高 度 。 

用 户 也 可 以 在 选 定 多 个 AP 元 素 之 后 ， 在 属性 面板 中 输入 宽度 和 高 度 值 ， 这 些 值 将 应 用 
于 所 有 选 定 的 AP 元 素 。 
技巧 : 选择 AP 元 素 后 ， 在 想 要 扩展 的 方向 上 同时 按 下 键盘 上 的 Ctrl 键 和 箭头 键 ， 可 以 一 次 一 个 像素 地 
调整 AP 元 素 的 大 小 。 


[jr. 7.4 设置 AP 元 素 的 堆 芭 顺序 


AP 元 素 的 运用 使 设计 者 在 处 理 图 像 时 能 够 在 很 多 个 界面 上 进行 ， 从 而 大 大 提高 了 设计 
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者 的 工作 效率 ， 可 以 设计 出 效果 更 丰富 的 网 页 。 此 外 ，AP 元 素 体 现 了 网 页 技术 从 一 个 二 维 
空间 向 三 维 空间 的 一 种 延伸 ， 即 AP 元 素 Z 轴 的 概念 ， 也 就 是 AP 元 素 的 堆 闭 顺序 。 

改变 AP 元 素 的 堆 车 顺序 ， 可 以 改变 AP 元 素 的 显示 效果 。 

下 而 通过 一 个 简单 实例 演示 改变 AP 元 素 的 堆 靶 顺序 的 两 种 操作 方法 。 

01 自 新建 一 个 文档 ， 单 击 “ 插 入 ”/“ 布 局 ”面板 中 的 “绘制 AP Div" Elgk E, TEX 
档 设计 视图 中 插入 一 个 AP 元 素 。 

02 肌 光标 定位 在 AP 元 素 内 ， 单 击 “ 插 入 ” 栏 “ 常 用 ”面板 中 的 插入 图 像 的 图 标 辑 ， 
在 AP 元 素 里 插入 一 张 图 像 。 

03. 按 同 样 方法 再 创建 两 个 AP 元 素 ， 并 在 AP 元 素 中 插入 图 像 。 此 时 的 页 面 效 果 如 图 
7-52 所 示 。 


一 
^5. Untitled-1 (XHTML)* QA 
E I EIER WEIL NEIN GERE EIS PILLE 


apDiv3 


LÀ 
body? [k]é$y Q 100€  4|857x 3739 26 K / 4 fh 


图 7-52 页 面 效果 


04 打开 AP 元 系 党 理 面 板 ， 选 中 需要 调整 堆 登 顺序 的 AP 元 素 apDiv1， 按 下 民 标 左 键 ， 
将 其 拖 动 到 apDiv3 的 上 面 ， 然 后 释放 鼠标 左 键 。 如 图 7-53 上 所 示 。 


üw C551ÉSS & AP TD ri Uw CSSTHER, & AP 元 素 Es 
AP 元 素 AP 元 素 
B5 ER E EI B5 Ez RR EO 


QO | m; 名 称 | Z7 
snl apllivz 2 
apDiv1 的 目的 位 置 
图 7-53” 拖 放 apDiv1 图 7-54 ”修改 apDiv2 的 Z 列 值 


此 时 ，apDiv1 的 Z 列 值 变 为 {ft， 页 面 效 果 如 图 7-54 所 示 。 
05 在 AP 元 系 官 理 面 板 中 选中 apDiv2， 单 击 Z 列 ， 输 入 一 个 比 apDiv3 的 堆 释 顺序 与 大 
的 数值 ， 本 例 输 入 5，apDiv2 在 堆 登 顺序 中 往 上 移动 ， 停 留 在 apDivl 之 上 ， 如 图 7-55 上 所 示 。 
如 果 输 入 一 个 较 小 的 数字 ， 则 AP 元 素 在 堆 著 顺序 中 往 下 移动 。 
注意 : 网 页 的 Z 列 值 为 0。 如 果 某 AP 元 素 的 2 列 值 为 负 值 ， 表 示 该 AP 元 系 在 网 页 之 下 ， 网 页 的 内 容 可 能 
会 覆盖 该 AP 元 素 所 包含 的 内 容 。 
06. 在 页 面 中 拖 动 apDivl1 和 apDiv2 到 合适 的 位 置 。 然 后 保存 文档 ， 按 F12 键 在 浏览 絮 
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图 7-55 ”页 面 效果 图 7-56 ”实例 效果 


[Ly 7.5 显示 、 隐 藏 AP 元 素 


在 Dreamweaver 中 ， 通 过 AP 元 对 显示 或 隐藏 网 页 中 的 东 个 元 陛 非 党 方便 。 

在 AP 元 素 管理 面板 中 选择 需要 改变 可 见 性 的 AP 元 素 ， 单 击 对 应 的 眼睛 全 图标 ， 即 可 
在 可 见 与 不 可 见 乙 间 切 换 。 其 中 睁 开 的 眼睛 表示 AP 元 素 可 见 ， 闭 上 的 眼睛 表示 不 可 见 ; 
没有 了 眼睛 表示 继承 其 父 AP 元 素 的 可 见 性 。 如 果 没 有 父 AP 元 素 , 则 继承 文档 主体 的 可 见 性 ， 
总 是 可 见 的 。 

如 末 要 同时 改变 所 有 AP 元 素 的 可 见 性 ， 直 接 单 击 眼睛 列 最 上 端的 眼睛 图 标 即 可 。 如 图 
7-57 上 所 示 。 


单 击 这 里 可 以 改变 AP 元 
素 的 可 见 性 


图 7-57 ”同时 改变 AP 元 素 的 可 见 性 


与 表格 相 比 ， 使 用 AP 元 素 可 以 更 方便 、 精 确 地 定位 页 面 元 素 。 所 以 在 网 页 制作 过 程 中 ， 
可 以 先 用 AP 元 素 快 速 创建 复 杂 的 页 面 布 局 ， 然 后 再 将 AP 元 素 布 局 转换 为 表格 布局 ， 以 供 不 
支持 AP 元 素 定 位 技术 的 一 些 早期 浏览 器 浏览 。 同 样 ， 一 些 使 用 表格 布局 的 页 面 如 果 希 望 利 
用 AP 元 素 的 灵活 性 ， 也 可 以 把 表格 转换 成 AP 元 素 。 
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下 面 通过 两 个 人 简单 实例 演示 AP 元 素 与 表格 相互 转换 的 方法 和 效果 。 

和 0 外 在 页 面 上 绘制 多 个 不 重 亚 的 AP 元 素 ， 并 编辑 内 容 ， 如 图 7-58 所 示 。 保 存 文 档 。 

02 执行 “修改 ”/“ 转 换 ”/“ 将 AP Div 转 换 为 表格 ”命令 ， 弹 出 “将 AP Div 转 换 
为 表格 ”对 话 框 ， 如 图 7-59 所 示 。 


人 


图 7-58 AP 元 素 布 局 效果 图 7-59 AP 元 素 转换 为 表格 后 的 效果 


对 话 框 中 各 参数 的 功能 介绍 如 下 : 

“最 精确 ”: 为 每 一 个 AP 元 素 建立 一 个 表格 单元 ， 同 时 AP 元 素 之 间 的 空 际 也 建立 相应 
的 单元 格 。 

“最 小 : 合并 空 单元 ”: 当 AP 元 素 之 间 的 距离 小 于 设 定 的 值 时 ， 则 这 些 空隙 不 生成 独立 
的 单元 格 ， 它 们 被 合并 到 较 近 的 AP 元 素 生 成 的 单元 格 中 。 

最 小 值 可 以 改变 ， 系统 默 认 最 小 值 为 4 个 像素 。 选 择 该 项 生成 的 表格 的 空 行 、 空 列 最 少 。 

“使 用 透明 GIFs”: 生成 表格 的 最 后 一 行 用 透明 的 GIF 文件 格式 填充 ， 这 样 在 不 同 的 浏 
响 圳 中 可 以 确保 表格 以 相同 的 列 宽 显 示 。 

“ 置 于 页 面 中 央 ”: 生成 的 表格 将 在 文档 窗口 中 居中 放置 。 

“防止 重 洁 ”: 防止 AP 762838. 

“显示 AP 元 素面 板 ”: 转换 完成 后 显示 AP 元 素 管理 面板 。 

“显示 网 格 ”: 转换 完成 后 显示 网 格 。 

“ 靠 齐 到 网 格 ”: 启用 吸附 到 网 格 功 能 。 

203. 本 例 保留 默认 设置 。 单 击 “ 确 定 ” 按 钮 ， 即 可 将 AP 元 素 布 局 的 页 面 转换 为 表格 
布局 ， 效 果 如 图 7-60 所 示 。 

如 果 对 页 面 布局 不 满意 了 ， 就 必须 进行 调整 。 如 果 是 使 用 表格 布局 的 页 面 ， 调 整 时 没 
有 使 用 AP 元 素 布 局 的 页 面 灵 活 。 这 时 可 以 把 表格 布局 的 页 面 转换 为 AP 元 素 布 局 的 页 面 ， 再 
进行 调整 。 

0 人 包 在 文档 窗口 中 制作 一 张 表格 ， 如 图 7-61 所 示 。 
[将 APDiv 转换 为 表格 o 
ET TN 

Ar azur | Cmm) 


v 使 用 透明 GIFs(T) 
置 于 页 面 中 央 (C) 


布局 工具 : BurERC 
显示 AP 元 素面 板 必 ) 
显示 网 格 @) 


一 靠 齐 到 网 格 QD | 8h50 | 


图 7-60 “转换 AP 元 素 为 表格 ”对 话 框 图 7-61 待 转 换 的 表格 
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02 执行 “修改 ”/“ 转 换 ”/“ 将 表格 转换 为 AP Div” 人 命令， 弹出 “将 表格 转换 为 
AP Div” 对 话 框 ， 如 图 7-62 所 示 。 
该 对 话 框 中 的 各 个 选项 功能 与 “将 AP Div 转 换 为 表格 ”对 话 框 相同 ， 在 此 不 再 获 述 。 
03 本 例 使 用 默认 设置 。 单 击 “ 确 定 ” 按 钮 ， 即 可 将 表格 布局 转换 为 AP 元 素 布局 的 
页 面 。 效 末 如 图 7-63 所 示 。 


r 
x 


布局 工具 : v PRIERGEG) 
显示 AP 元 素面 板 (A) - 
g B. — : - 
显示 网 格 (c) —I kar 71 x REST ikHSE 
靠 齐 到 网 格 (8) 帮助 中， | | 
图 7-62 “将 表格 转换 为 AP Div” 对 话 框 图 7-63 ”转换 为 AP Div 的 页 面 布局 


使 用 “将 表格 转换 为 AP Div ”命令 转换 圾 格 时 ， 位 于 表格 外 的 页 面 元 又 也 会 放 入 四 元 
素 中 。 表 格 中 的 空 单 元 格 不 会 转换 为 AP 元 系 ， 除 非 它们 具有 痛 景 颜 色 。 
注意 : 在 模板 文档 或 基于 模板 创建 的 文档 中 ， 不 能 将 AP 元 素 和 表格 进行 相互 转换 。 如 果 确 实 需要 转换 ， 
应 在 将 文档 存 为 模板 之 前 进行 转换 。 


AP 元 素 在 网 页 设计 中 占有 十 分 重要 的 地 位 ， 不 仅 可 以 精确 定位 网 页 元 素 ， 还 可 以 配合 
表单 和 动作 制作 出 许多 经 典 的 特效 。 下 面 将 用 一 个 人 简单 实例 演示 AP 元 素 的 简单 特效 。 

上 网 时 常 遇 到 这 样 的 网 页 ， 在 页 面 上 只 显示 一 张 图 片 ， 当 用 户 把 女 标 移动 到 男 一 张 图 
片 或 文本 链接 上 时 ， 图 片 被 蔡 换 ， 当 用 户 把 鼠标 从 图 片上 移 开 时 ， 再 次 显示 原来 的 图 片 。 
本 例 最 终 效果 如 图 7-64 所 示 。 


图 7-64 ”实例 效果 1 图 7-65 ”实例 效果 2 


当 鼠 标 移动 到 右 侧 的 网 片上 时 , 堪 侧 的 网 请 被 隐藏 ， 显 示 另 一 幅 匈 片 , 如 图 7-65 所 示 。 
恨 标 离开 网 片 时 ， 再 次 显示 诛 来 的 图 片 。 
本 实例 的 具体 制作 步骤 如 下 : 
01. 启 动 Dreamweaver CS$5， 新 建 一 个 文档 ， 设 置 标题 为 “ 流 金 岁月 ”并 保存 。 
02 肯 单 击 “ 插 入 ”/“ 布 局 ”面板 中 的 “绘制 AP Div” 的 图 标 旦 ， 在 文档 设计 视图 中 
拖 动 鼠标 绘制 一 个 AP 元 素 。 将 光标 定位 在 AP 元 素 中 ， 输 入 文字 “ 流 ”， 并 在 属性 面板 中 调 
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整 AP 元 系 大 小 、 人 位置、 背景 颜色 及 文本 格式 。 

03. 按照 第 上 02 的 方法 再 插入 三 个 AP 元 素 ,， 在 属性 面板 上 议 置 不 同 的 颜色 ， 并 分 别 
输入 “人 金 ”、“ 岁 ”和 “月 ”。 

04. 在 AP 元 泰 管理 面板 上 根据 需要 设置 4 个 AP 元 聂 的 堆 著 顺序， 并 进行 排列 。 完 成 后 
的 效果 如 图 7-66 所 示 。 

05 朋 单 击 插入 AP 元 素 的 图 标明， 在 文档 设计 视图 中 再 插入 一 个 AP 元 素 ， 使 用 默认 名 
称 apDiv5。 

06 将 光标 放置 在 AP 元 系 内 ， 单 击 插入 图 像 的 图 标 输入 一 幅 图 像 ， 调 整 图 像 大 小 及 
位 置 。 并 在 AP 元 素 管 理 和 面板 中 ， 将 其 拖 到 最 展 关 。 效 有 末 如 网 7-67 所 示 。 


图 7-66 AP 元 素 排 列 效 果 1 图 7-67 AP 元 素 排列 效果 2 


07 肯 单 击 插入 AP 元 素 的 图 标 旱 ， 在 页 面 左 侧 再 插入 一 个 AP 元 素 apDiv6。 在 AP 元 素 中 
插入 一 幅 图 像 ， 并 调整 图 像 的 大 小 和 位 置 如 图 7-68 所 示 。 


7. Canetpub wreroot AP TERR m Qai) OOO 


Ee -一 一 一 一 一 一 一 
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图 7-68 ”页 面 效果 


08. 打开 AP 元 素 管 理 面 板 ， 单 击 AP 元 素 apDiv6 左 侧 的 眼睛 图 标 ， 使 之 闭 眼 。 

09 月 在 AP 元 素 apDiv6 所 在 的 位 置 绘制 一 个 与 apDiv6 大 小 一 致 的 AP 元 素 ， 使 用 默认 名 
称 apDiv7， 然 后 在 其 中 插入 一 幅 图 像 。 

10. 打开 AP 元 素 管 理 面 板 ， 单 击 apDiv7 左 侧 的 眼睛 图 标 ， 使 之 闭 眼 ， 单 击 apDiv6 左 
便 的 眼睛 图 标 ， 使 其 可 见 。 

11 上 用 鼠标 单 击 AP 元 系 apDiv5， 执 行 “ 窗 口 ”/“ 行 为 ”命令 ， 打 开行 为 面板 。 

12. 单 击 行为 面板 左边 的 加 号 (+) 按钮 ， 从 弹出 的 下 拉 沫 单 中 执行 “显示 -隐藏 元 
对 ”命令 ， 弹 出 “显示 -隐藏 元 素 ” 对 话 框 。 

13. 在 对 话 框 中 的 元 系列 表 中 选择 AP 元 系 apDiv6， 然 后 单 击 “ 隐 世 ”按钮 ; 选择 
apDiv7， 然 后 单 击 “ 显 示 ” 按 钮 。 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 
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40 单 击 事件 下 拉 列 表 按 钮 ， 从 弹出 的 事件 列表 菜单 中 选择 OnMouse0ver。 

L15 月 为 AP 元 素 apDiv5 添 加 第 二 个 “显示 -隐藏 元 素 ” 行 为 。 在 “显示 -隐藏 元 素 ” 对 
话 框 中 选择 AP 元 素 apDiv7， 然 后 单 击 “ 隐 藏 ”按钮 ; 选择 apDiv6， 然 后 单 击 “ 显 示 ” 按 钮 。 
单 击 “ 确 定 ” 按 钮 关闭 对 话 框 后 ， 设 置 事 件 为 OnMouseOut。 

16 保存 文档， 并 按 F12 键 预览 效果 。 


在 上 一 章 中 我 们 已 基本 完成 了 主页 的 制作 ， 在 浏览 右 中 预览 时 会 发 现 ， 当 缩放 窗 
口 时 ， 使 用 AP 元 素 定 位 的 导航 项 目 图 片 位 置 始终 保持 不 变 ， 但 相对 于 整个 页 面 来 说 ， 页 面 
布局 就 变 得 有 些 混 乱 了 ， 如 图 7-69 所 示 。 


MIMU AIC 0042 
188 4 FL 06 


图 7-69 页面 效 果 

te leh 转换 为 表格 布局 ， 以 精确 布局 页 面 。 步 又 如 下 : 

4.01 按 住 Shift 键 选中 要 转换 为 表格 的 5 个 AP 元 素 。 

| An “修改 ”/“ 转 换 ”/“ 将 AP Div 转 换 为 表格 ”来 单 命令 ， 打开“ 将 AP Div 
转换 为 表格 ”对 话 框 。 

03 肯 在 “表格 布局 ”区 域 选 择 “ 最 小 : 合并 空白 单元 ”， 且 “小 于 4 像素 宽度 ”。 在 
“布局 工具 ” 区 域 选 中 “防止 重 营 ” 复 选 框 。 

04 和 单 击 “ 确 定 ” 按钮 关闭 对 话 框 ， 并 将 选中 的 AP 元 素 转 换 为 表格 。 如 图 7-70 所 示 。 


| 
ri 
"Free 
图 7-70 ”转换 后 的 表格 图 7-71 表格 效果 
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由 于 叶 航 图 片 的 背景 是 表 明 的 ， 且 有 两 张 导航 图 片 的 文本 闫 色 为 白色 ， 因 此 不 可 见 。 

05 有 选中 转换 出 来 的 表格 ， 将 其 插入 到 原来 导航 图 片 所 在 的 单元 格 中 。 

206. 调整 表格 的 宽度 和 高 度 ， 使 其 与 原来 单元 格 的 宽度 和 高 度 一 致 。 完 成 后 的 效果 
如 图 7-71 所 示 。 

和 和 07 保存 文档 ， 并 按 F12 键 在 浏览 器 中 预览 ， 效 果 如 图 7-72 所 示 。 


rz 
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图 7-72 ”页 面 效果 


此 时 无 论 怎样 调整 窗口 的 大 小 ， 导 航 图 所 的 位 置 始 终 相 对 不 变 ， 从 而 保持 整个 页 面 布 
局 的 整洁 。 
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通常 , 一 个 站 点 中 有 很 多 东西 是 相同 的 ,例如 每 一 个 
页 面 都 有 相同 的 页 面 广告 条 、 相 同 的 导航 栏 ,， 这样 访问 者 
才能 自由 地 访问 这 个 站 点 。 如 果 为 每 个 页 面 都 创建 这 些 相 
同 的 内 容 , 增 大 工作 量 的 同时 ,也 浪费 了 宝贵 的 网 络 空间 。 
使 用 框架 可 以 轻松 解决 这 些 问 题 。 
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框架 概述 
创建 框架 和 框架 集 
选择 框架 和 框架 集 

保存 框架 集 和 框架 

编辑 框架 

框架 应 用 示例 

实例 制作 之 使 用 框架 显示 页 面 
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什么 是 框架 呢 ? 框架 十 网 页 中 特有 的 内 容 ， 在 编辑 网 页 的 窗口 中 ， 框 架 是 窗口 的 一 部 
分 ， 它 将 一 个 Web 页 面 分 成 多 个 不 同 的 HTML 页 面 ， 其 中 每 一 个 HTML 页 面 都 是 独立 的 ， 都 共 
有 初始 显示 的 URL 页 面 ， 都 可 以 控制 框架 的 布局 和 属性 。 在 打开 框 染 中 的 条 一 个 超 链 按时 ， 
只 在 目标 框架 中 显示 链接 的 内 容 ， 整 个 页 面 可 以 你 持 不 变 ， 从 而 使 用 尸 能 够 一 次 浏览 更 多 
的 内 容 , 或 方便 用 户 在 文 草 内 容 和 导航 内 容 之 间 进 行 切 换 。 换 句 话 说 , 框 染 可 以 将 多 个 HTML 
文档 组 合 在 一 起 ， 共 同 显示 在 一 个 屏 磊 上;， 在 浏览 磊 中 ， 每 一 个 框架 者 是 独立 的 浏览 厚 。 

框 染 由 两 个 主要 部 分 组 成 : 框架 集 和 单个 框 淋 。 所 谓 框架 集 ， 驳 是 定义 网 页 结构 与 属 
性 的 HTML 页 面 ， 这 其 中 包含 了 显示 在 负面 中 框架 的 数目 ， 框 保 的 尺寸 ， 浅 入 框架 的 页 面 
的 来 源 ， 以 及 其 他 一 些 可 定义 的 属性 的 相关 信息 。 框 架 集 页 和 面 不 会 在 浏览 右 中 显示 ， 它 只 
用 于 存放 页 面 中 框架 如 何 显示 的 信息 。 单 个 框架 是 指 在 网 页 上 定义 的 一 个 区 域 。 

一 般 情况 下 ， 框 染 网 页 由 边框 、 深 动 条 和 其 中 显示 的 框架 文件 组 成 。 下 面 我 们 人 重要 介 
绍 一 下 框架 网 页 的 这 三 个 组 成 部 分 ， 便 于 读者 更 好 地 理解 本 革 的 内 容 。 

€ 边框 

边框 是 相 邻 框 染 间 的 分 阳线 。 边 框 线 有 商 个 属性 : 粗细 和 颜色 。 用 户 可 以 根据 需要 调 
整 边框 的 粗细 和 颜色 ， 以 增加 视 沉 效 来 。 

令 ” 深 动 条 

当 框 染 中 的 内 容 比 较 多 ， 不 能 一 屏 完 全 显示 时 ， 束 需要 用 深 动 条 来 控制 深 动 外 面 ， 以 
便 显 示 网 页 其 他 部 分 的 内 容 。 

€ ix 

BT DES, WEASZEPDO EBS—4hmbebA. Ap EA RI DANSE LIBI EECREARIT] 
SW A zs — T ARR LIRE S IX TERES VJTT TIS P3 9t SC BI ZU EEAR CT e 

TAS. TEHEZR UU SR AR. Plug. LxRHIDS "TEE ELS BLA HIE AS HP P1 9 762 FE 
将 确定 位 ;测试 导航 可 能 很 耗 时 间 ; 各 个 市 有 框架 的 页 面 的 URL 不 显示 在 浏览 融 中 ， 因 此 
访问 者 可 能 难以 将 特定 页 面 设 为 书签 。 

总 而 言 之 ， 使 用 框架 布局 页 面 可 以 方便 地 表现 出 页 面 的 层次 结构 ， 如 果 与 其 他 布 
局 工具 配合 使 用 ， 扬 长 避 短 ， 可 以 实现 复杂 、 精 天 的 厂 面 设计 。 


S 


在 Dreamweaver CS5 中 创建 框架 有 两 种 方法 : 使 用 Dreamweaver 的 预 设 框架 ， 或 通过 拆 
分 操作 目 定 义 框 架 。 下 面 分 别 通过 实例 进行 介绍 。 


LL]s. 2. 1 使 用 预 置 框架 


选择 一 个 预 旱 的 框 染 将 目 动 地 建立 所 须 要 的 框 染 集 和 框 染 来 创建 布局 ， 这 也 是 问 幢 
面 中 插入 框架 布局 的 最 简便 的 方法 。 
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0 外 新 建 一 个 HTML 页 面 ， 并 在 其 中 键入 文本 。 

02. 激活 “插入 ”/“ 布 局 ”面板 ， 单 击 图 标 国 : 血 中 的 向 下 第 头 弹出 “框架 的 类 型 ” 
下 拉 沫 单 ， 如 图 8-1 所 示 。 

Dreamweaver 为 每 个 预 置 的 框架 提供 了 一 个 可 视 的 代表 图 案 ， 方 便 用 户 快速 了 解 所 选 
框架 的 结构 。 

03 引 在 预 置 的 框架 类 型 中 单 击 需 要 的 框架 。 本 例 选 择 图 标 回 。 此 时 会 弹出 “框架 标 
签 辅 助 功能 属性 ”对 话 框 ， 提 示 用 户 为 每 一 个 框 染指 定 一 个 标题 。 

如 有 果 不 希 望 每 次 插入 框架 时 都 弹出 这 个 对 话 框 ， 可 以 在 “首选 参数 ”对 话 框 的 “辅助 
功能 ”分 类 中 取消 选择 “ 框 染 ”。 

04 月 本 例 保留 “框架 标签 辅助 功能 属性 ”对 话 杠 中 的 默认 设置 。 单 击 “ 确 定 ” 按 钮 
关闭 对 话 框 ， 即 可 在 文档 窗口 的 设计 视图 中 插入 指定 的 框架 。 

预 置 框 染 的 代表 图 标 都 是 由 两 种 闫 色 组 成 的 ， 其 中 获 色 的 区 域 表示 在 创建 框 染 后 ， 原 
文档 内 容 所 在 的 位 置 ， 罕 日 区 域 则 是 指 狐 创建 的 框 染 文档 所 在 的 位 症 ， 如 图 8-2 所 未 。 


NE s d — 7. UntitledFrameset-16 (XHTML)* ooo 
布局 w TE CE UT ET HE UT 
[m | zm ^ : 
在 左 过 插入 列 
在 右 过 插入 列 

[c] IFRAWE " 

[E] 框架 原文 档 内 容 | 

[L] 左 训 框架 | m Dreamweavet 为 每 个 预 置 的 框架 提供 了 一 个 可 视 的 代表 图 案 ， 方 便 | 
加 wes 用 户 快速 了 解 所 选 框架 的 结构 。 框 架 的 代表 图 标 都 是 由 两 种 颜色 组 4 

[7 顶部 框架 成 的 ， 其 中 蓝 色 的 区 域 表 示 在 创建 框架 后 ， 原 文档 内 容 所 在 的 世 置 : 

mp 2 定 白 区 域 则 是 指 新 创建 的 框架 文档 所 在 的 和 位置 。 : 

加 | 下 方 和 幅 套 的 左 侧 框架 0 

LT] 下 方 和 婴 套 的 右 侧 框 架 

加 在 侧 和 杠 套 的 下 方 框架 : 这 里 的 内 容 是 搬入 框架 

LT zm da T toe ' 

E] 上 方 和 下 方 框架 3 之 前 页 面 上 已 有 的 内 容 

[I7] 左 旭 和 嵌 套 的 顶部 框架 0 

ET 右 旭 和 婴 套 的 上 方 框架 

[r1 项 部 和 嵌 套 的 左 册 框架 

LT] 上 方 和 嵌 套 的 右 侧 框架 Kfraneset Rw 577 x 373v 1K/1 秒 

图 8-1 了 预 置 的 框 染 类 型 图 8-2 ”插入 框架 后 的 效果 


如 果 插 入 框架 之 后 ， 框 架 边 框 不 可 见 ， 执 行 “ 俘 看 ”/“ 可 视 化 助理 ”/“ 框 染 边 框 ” 
命令 ， 即 可 使 文档 窗口 中 的 框 染 边框 可 见 。 


[15.2.2 自 定义 框架 


通常 情况 下 ， 使 用 Dreanweaver 预 置 的 框架 就 可 以 满足 页 面 布局 的 需要 。 如 果 要 使 用 
框架 设计 个 性 化 ， 或 较为 复杂 的 页 面 ， 就 要 自 定义 框架 了 。 
下 面 以 一 个 实例 来 演示 自 定义 框架 设计 网 页 布局 的 具体 步 又。 
01) 新 建 一 个 文档 并 保存 。 
02) 执行 “查看 ”/“ 可 视 化 助理 ”/“ 框 架 边框 ”命令 ， 显 示 文档 窗口 的 框架 边框 。 
03) 将 鼠标 移 到 文档 窗口 顶部 ， 当 鼠标 指针 变 为 上 下 的 双向 箭头 时 ， 按 下 鼠标 左 键 
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器 下 拖 动 到 合适 的 位 置 ， 即 可 用 一 个 框架 边框 水 平 切 制 文档 。 效 来 如 图 8-3 所 示 。 


fà M BUbR IR] P362] 


图 8-3” 拖 动 框架 边框 图 8-4” 拖 动 框 染 边 框 


04 旧 将 光标 放置 在 窒 口 左 侧 的 框 以 边框 上 ， 当 鼠标 指针 变 成 左右 双 同 箭头 时 ， 按 下 
孔 标 左 键 并 同 右 拖 动 到 合适 的 位 置 ， 即 可 拖 出 一 条 垂直 的 框 染 边框 分 割 页 面 。 此 时 的 页 面 
效 示 如 图 8-4 所 示 。 

在 修改 框架 结构 时 ， 把 光标 定位 在 框架 内 ， 然 后 执行 “修改 ”/“ 框 染 集 ” 采 单 命令 
下 的 拆 分 框 染 命令 ， 也 可 以 目 定 义 框 染 。 

05 将 光标 定位 在 右 下 框 染 中 ， 执 行 “ 修 改 ”/“ 框 染 集 ”/“ 拆 分 右 框 染 ” 命 令 ,， B 
可 将 右 下 框架 折 分 为 两 个 区 域 ， 如 图 8-5 所 示 。 

一 个 网 页 可 以 包含 多 个 框 染 ,每 个 新 创建 的 框架 部 包括 它 目 己 的 框架 集 HTML 文 档 和 框 
染 文 档 。 框 染 文 档 可 以 是 普通 的 网 页 ， 也 可 以 古 故 外 的 一 个 框 保 网 页 ， 如 末 框 架 中 包含 的 
网 页 是 一 个 框架 网 页 ， 则 形成 了 框架 的 嵌 套 。 例 如 ， 上 例 创 建 的 框架 就 是 一 个 撕 套 框架 。 
便 单 地 说 ， 嵌 人 套 框 染 束 是 一 个 框 染 中 的 框架 。 大 多 数 网 页 使 用 的 框架 部 尽 媒人 套 框 染 。 


"C 


图 8-5” 拆 分 右 框 染 的 效 来 


Lj8. 2.3 noframe 和 iframe 


由 于 早期 版 本 的 浏览 帮 不 支持 框 淋 ， 当 页 面 中 含有 框架 时 ， 浏 贤 费 束 不 能 正确 显示 页 
面 的 内 容 ， 这 时 必须 编辑 一 个 无 框 洪 文档 。 当 不 文 持 和 框 淋 的 浏览 融 载 入 框架 体 文件 时 ， 浏 
览 器 只 会 显示 出 无 框架 内 容 。 

顷 辑 无 框架 内 容 的 具体 操作 步骤 如 下 : 
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01^ 新 建 一 个 文档 ， 执 行 “ 修 改 ”/ “框架 集 ”/ “编辑 无 框架 内 容 ” 命 令 。 
02 当前 的 文档 内 容 会 被 清除 ， 正 文 区 域 的 上 方 出 现 “ 无 框架 内 容 ” 字 样 。 在 状态 
栏 中 也 出 现 了 一 个 《noframe》 标 签 ， 如 图 8-6 所 示 。 


^5, UntitledFramese t-6 (XHTML)* ooQ 
无 框架 内 容 


noframes? body? [k]éy Qj 100€  .|443x288- 1 K / 1 5 


图 8-6 ”编辑 NOFRAMES 内 容 
可 以 在 该 窗口 中 输入 文本 、 插 入 图 像 、 编 辑 表格 、 制 作 表 单 等 内 容 。 但 是 不 能 在 该 窗 
口中 创建 框 染 。 
03 执行 “修改 ”/“ 框 架 集 ”/“ 编 辑 无 框架 内 容 ” 命 令 ， 返 回 到 文档 窗口 中 。 
Iframe 是 个 比较 新 的 标识 。 其 实 ifrane 和 frame 功 能 一 样 ， 也 可 以 调用 一 个 外 部 文件 ， 
不 同 的 是 它 是 个 浮动 框架 ， 可 以 放置 在 网 页 中 的 任何 位 置 ， 而 且 它 引用 的 HTML 文 件 不 是 与 
另外 的 HTML 文 件 相 互 独立 显示 ， 而 是 直接 欣 入 在 一 个 HTML 文 件 中 ， 与 这 个 HTML 文 件 内 容 相 
互 融 合 ， 成 为 一 个 整体 。 此 外 ， 利 用 iframe 还 可 以 多 次 在 一 个 页 面 内 显示 同一 内 容 ， 而 不 
必 重 复写 内 容 ， 一 个 形象 的 比喻 即 “ 画 中 画 ” 电 视 。 这 种 极 大 的 自由 度 可 以 给 网 页 设计 带 
来 很 大 的 灵活 性 。 
下 面 通过 一 个 简单 实例 演示 iframe 的 使 用 方法 和 页 面 效 果 。 
01. 新 建 一 个 HTML 文 档 。 打 开 “ 插 入 ”浮动 面板 ， 并 切换 到 “布局 ”面板 。 
02 9 单 击 “ 布 局 ”面板 上 的 插入 iframe 按 钮 四 We ， 文 档 窗 口 自动 切换 为 “ 折 分 ” 
视图 ， 并 在 “代码 ”视图 中 插入 《iframe>》《/iframe》 标 记 ， 如 图 8-7 所 示 。 
03 9 单 击 属性 面板 上 的 “刷新 ”按钮 ， 即 可 在 “设计 ”视图 中 看 到 一 个 灰色 的 和 矩形， 
表示 插入 的 iframe， 如 网 8-8 所 示 。 
LIII. Bx) ENNIUS 


ESTSETSHTI^S 
[3| 8 -title> 无 标题 文档 </title> 
T : X/head» 


SEED. [| 
*| 9 .z/body» 


* 
(3| 10 —«/htnl» 
atl 


| 


c zu -0 
1|. 58 <title> 无 标题 文档 < /title> 
6 — «/head» 


也 
«| 8L «body»ziframe»«/iframe- 


L4 
x 9 X/body» 
ma z/html» 


m 


图 8-7 插入 iframe 图 8-8 “设计 ”视图 中 的 iframe 
04 在 “代码 ”视图 中 将 《Iframe »X/iframe? f£ (X 7g Xiframe name-^il^ 
src-"iframe.html" width=600 height=300></iframe>。 
Iframe 标 记 的 使 用 格式 如 下 : 
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《Iframe name= main src-"URL/ width=”x” height-^ x^ scrolling= [OPTION]” 

frameborder= x” “></iframe> 

各 个 属性 的 功能 简要 介绍 如 下 : 

€ Name: 给 浮动 框架 合 名 。 该 名称 将 出 现在 超 链 接 的 target 属性 下 拉 列 表 中 。 

e Src: 浮动 框 染 上 默认 显 示 有 的 页面 ， 既 可 是 HTML 文件， 也 可 以 是 文本 、ASP 等 。 

€ width, height: 浮动 框架 的 宽 与 高 。 

@ GScrolling: 议 置 是 合 显示 滚动 条 。“auto” 表 示 目 动 显 示 ; “yes” 表 示 总 是 显 
zs; “no ” 则 表示 不 显示 。 
Frameborder: 浮动 框 淋 的 边框 大 小 ， 黑 认 值 为 1。 为 了 与 邻近 的 内 容 相 融合 ， 御 
设置 为 0， 不 显示 。 

€ Marginwidth: 设置 浮动 框 染 的 水 平 边 忠 ， 单 位 为 像素 。 

€ Marginheight: 浮动 框架 的 垂直 边 距 ， 单 位 为 像素 。 

e lign: 设置 浮动 框 染 中 的 内 容 的 显示 方式 。 

05 在 “设计 ”视图 中 ,将 光标 放置 在 插入 的 浮动 框 染 下 方 ， 输 入 需要 的 文本 ， 并 设 
置 文本 的 超 链接 。 尤 其 需要 注意 的 是 ， 将 超 链接 文本 的 “target” 属 性 设置 为 “il”， 即 
本 例 中 插入 的 浮动 框 染 的 名 称 。 

06. 保存 文档 。 按 Fl12 键 在 浏览 器 中 预览 页 面 效 来 ， 如 图 8-9 所 示 。 


d Hugo EA, NR 
At r1] 4E $$ 

QE. £444. 

44 $48 f 1938, 34b 
Ad. d. — d ow9a i*| 
|«€————— 3 »| 


Load .À 
Load B 


Load C 


na 


图 8-9 ” IFrame 的 效果 
和 框架 一 样 ， 浮 动 框架 也 可 以 艇 套 。 事 实 上 ， 本 例 制作 的 就 是 一 个 髓 套 的 浮动 框架 。 
VE AS P EGA Sz BJ XC f Fi frame. html 束 是 在 本 书 此 6 革 讲 解 浮 动 框 染 标记 时 制作 的 一 个 
例子 。 如 图 8-10 所 示 。 
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图 8-10 d &HIFrameX 
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选取 框架 和 框 染 集 可 以 直接 在 文档 窗口 中 进行 ， 也 可 以 在 “框架 ”面板 中 进行 。 

堵 认 情况 下 ， 在 页 面 中 插入 框 染 后 ， 会 目 动 选择 整个 框 染 作为 操作 对 销 ， 此 时 所 有 子 
框 凡 的 边界 都 会 被 虚线 包围 。 如 朱 当 前 选择 的 是 一 个 子 框 贸 ， 珊 要 重新 选择 整个 杠 架 ， 可 
以 执行 以 下 操作 之 一 : 

(1) 将 鼠标 指针 移动 到 框 染 的 条 条 边框 上 ， 当 忌 标 指针 变 为 水 平 双 同 第 尖 《 左 右边 
AE) 或 牌 下 双 问 第 头 “上 下 边框 时 ， 早 击 边框 即 可 选中 整个 框架 。 在 文档 窗口 中 ， 被 选 
取 的 框 染 周 围 有 虚线 包围 。 

(2) 将 也 标 指针 移动 到 第 一 次 分 割 框 染 的 边框 位 置 ， 当 孔 标 指针 变 为 水 平 双 同 入 头 
(左右 边框 ) 或 垂下 双 问 第 类 “上 下 边框 ) 时 ， 单 击 边框 即 可 选中 整个 框 染 组 。 

(3) 执行 “窗口 ”/“ 框 氏 ” 命 令 可 以 打开 “ 框 肝 ”面板 ， 用 了 鼠标 点 击 框 凡 的 边框 即 
n [X BUE AR. 

ME ZR TELE DE AR S eT TERT RT TUS ATE Rs UL BE E ZITAT I JU ER 
而 这 种 层次 在 文档 窗口 中 的 显示 可 能 不够 下 观 。 

如 朱 要 选择 框架 中 的 某 个 子 框 六， 可 以 执行 以 下 操作 之 一 : 

(1) 在 设计 窗口 中 按 住 Alt 键 的 同时 ， 用 鼠标 单 击 所 要 选取 的 框 朵 区域。 选中 后 的 子 
框 膝 周围 有 虚线 包围 。 

(2) 打开 如 图 8-11 押 示 的 框 殿 管理 面板 ， 在 需要 选择 的 子 框 殿 的 位 置 单 击 眼 标 。 文 
档 窗口 中 该 子 框 淋 的 周围 被 虚线 包围 ， 表 示 它 已 经 被 选中 ， 如 图 8-12 所 不 。 

Dv deme E 


- 
(7 mibitledivameset-6 th 六 ooo 


选中 的 子 框架 


Dreme rad [10 Q 101. .Wr 208 1 E/ LM 


图 8-11 框架 管理 面板 图 8-12 ”选择 一 个 子 框架 
如 末 要 选择 先 套 框架 ， 将 鼠标 指针 移动 到 讽 套 框 淋 中 子 框 漆 公 共 的 边框 ， 当 鼠标 指针 
变 为 水 平 双 同 箭 头 《〈《 堪 右边 框 ) sXGE BOULE Su 3k Cl PUAWEE) 时 ， 单 击 边框 即 可 选中 极 套 
NEAR. MérpHCEEASTEOCEI ELI HUE NES GLBSE. 


CHE, PRU AR IL s. PSU TRTETIEAR PE 01. ET RE THEATRE 7T POR 
的 网 页 ， 所 以 在 你 存 框 染 结 构 的 文档 时 ， 不 但 要 保存 整个 文档 的 框 染 结构 ， 还 要 保存 各 个 
框 染 文件 。 否 则 ， 框 架 中 输入 的 内 容 会 丢失 。 

下 面 通过 一 个 简单 例子 演示 保存 框架 集 和 框架 的 操作 步骤 。 
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01, 新 建 一 个 HTML 文 档 ， 并 插入 一 个 散 套 框 淋 。 如 图 8-13 所 示 。 


Fr -" 
T. Untitled rame-25 (XHIME) ooo 


" 
e d 
EIGREE RAI] 
pimag dn x denm 
H 
» 


/3 


图 8-13 ” 竺 傈 存 的 框架 


02 9 选择 “文件 ”/“ 你 存 框架 页 ”有 末 单 命令 ; 或 选择 “文件 ”/“ 框 架 集 为 存 为 ” 
命令 ， 则 只 保存 框架 集 文 件 。 在 最 后 退出 文档 时 ，Dreamweaver 会 弹出 对 话 框 询问 是 否 保 
存 各 个 框架 文件 。 

03. 在 框架 内 蛙 击 ， 然 后 选择 “文件 ”/“ 保 存 框 架 ” 命 令 ， 则 只 保存 框架 文件 。 

04 肯 执行 “文件 ”/ “保存 全 部 ”命令 ， 则 会 弹出 一 个 保存 文件 窗口 ， 同 时 会 显示 整 
个 框架 被 选中 的 状态 。 

05 在 弹出 的 保存 文件 窗口 中 输入 文件 名 ， 然 后 单 击 “保存 ”按钮 保存 框架 集 文件 。 

接着 ， 叉 会 弹出 下 一 个 保存 文件 的 窗口 ， 同 时 文档 窗口 正 要 保存 的 文件 所 在 的 子 框架 
锐 先 中。 在 弹出 的 保存 文件 窗口 中 输入 文件 名 ， 然 后 单 击 “保存 ”按钮 保存 该 框架 文件 。 
同 理 保存 其 他 的 框 染 文件 。 如 果 有 n 个 框 染 ， 就 必须 保存 n+1 次 文件 。 

图 8-13 所 示 的 框架 集 由 三 个 框架 组 成 ， 每 个 框 染 中 都 有 独立 的 一 个 HTML 文 档 。 因 此 ， 


保 在 该 框 染 集 时 ， 实 际 上 要 你 存 4 个 独立 的 文件 ， 即 框架 集 文件 和 三 个 框架 文件 。 


在 页 面 中 创建 框架 之 后 ， 框 架 的 大 小 、 外 观 也 许 不 满足 需要 ， 或 者 要 编辑 框架 文件 ， 
这 时 需要 进一步 调整 框 淋 。 下 和 而 介绍 编辑 框 染 时 第 用 的 一 些 操 作 。 


Lj8. 5. 1 设置 框架 属性 


和 其 他 页 面 元 素 一 样 ， 在 属性 和 面板 中 可 以 定义 框 染 或 框 染 集 的 各 种 常用 属性 ， 如 框 染 
名 称 、 源 文件 、 页 边 距 、 框 架 集 的 边线 颜色 和 宽度 等 。 
在 页 面 中 选取 了 一 个 框架 之 后 , 文档 窗口 底部 即 可 出 现 框 染 属 性 和 面板 , 如 图 8-14 所 示 。 
lt 
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图 8-14 ”框架 属性 和 面板 
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框架 属性 面板 中 的 各 项 属性 功能 简要 介绍 如 下 : 

e  "IEXAMNC: 用 于 对 框架 进行 命名 ， 以 方便 在 代码 中 进行 编辑 。 

框架 名 称 只 能 使 用 字母 、 数 字 和 下 划 线 (_) ， 且 必须 以 字母 开头 ， 且 区 分 大 小 写 。 

e “ 源 文 件 ”: 指定 框架 文件 的 路 径 与 名 称 。 

e “该 动 ” : POENAE T WINS 

将 此 选项 设置 为 “上 献 认 ”将 不 设 荀 相应 属性 的 值 ， 从 而 使 各 个 浏览 右 使 用 其 默认 值 。 
大 多 数 浏 响 如 默认 为 “ 目 动 ”， 这 总 味 看 只 有 在 浏览 此 窗 口中 没有 旦 够 空间 显示 当前 框 染 
的 完整 内 容 时 才 显 示 深 动 条 。 

e “边框 ”; LP ast ENTE ASIE. 

VUL ELA T st EE AS Hee PE TRE Bon PLC] e Eos. 2 HL GRE PUE TH SITES AES 
边框 部 设 置 为 “ 否 ” 时 ,才能 取消 当前 框 染 的 边框 。 

e “不 能 调整 大 小 ”: 决定 是 否 允 许 读 者 改动 框 染 的 大 小 。 

如 果 选 中 此 项 ， 则 访问 者 将 无 法 通过 拖 动 框架 边框 在 浏览 器 中 调整 框架 大 小 。 

e "iJ WE OEC: Aw: (上下) 页 边 距 ， 设 管内 容 与 框 染 边 框 左右 (上下) 

的 距离 《框架 边框 和 内 容 之 间 的 空间 〉。 
选中 了 一 个 框架 集 忆 后 ， 文 档 窗口 的 下 站 将 出 现 框 架 集 属性 面板 ， 如 网 8-15 所 示 。 


T] 框架 集 Jg a) igBRe (D [ 加 

5, 7 ”边框 宽度 rA 
GO — xu 

行 6 HESSE " 


图 8-15 框架 集 属 性 面板 


框架 集 属性 面板 中 的 各 项 属性 功能 简要 介绍 如 下 : 
e “框架 集 ”: 此 属性 显示 了 当前 选 定 的 框架 集中 所 包含 的 框架 行 数 和 列 数 。 
e “边框 ”:; 和 是 合 在 浏览 锅 中 显示 框 嘛 的 边框 。 该 设置 会 被 框架 属性 面板 中 的 “ 边 
NE" STET i e 
e “行列 选 定 范 围 ”: 图 形 化 地 显示 选 定 框 染 集 的 结构 , 单 击 可 以 选中 相应 的 框 染 。 
使 用 该 属性 项 ， 可 以 精确 地 分 配备 个 框架 所 占用 的 空间 。 步 又 如 下 : 
(1) 在 属性 面板 上 点 击 “ 行 列 选 定 范围 ”和 框 内 的 标签 选取 行 或 列 。 
(20 在 “ 值 ” 域 中 输入 一 个 数 子 ， 设 年 所 选 行 或 列 的 尺寸 。 
(3) 在“ 单位” 下拉 列表 中 选择 值 的 度量 单位 。 
用 户 还 可 以 通过 鼠标 的 拖 动 操作 近似 地 调整 框架 的 矿 寸 。 将 鼠标 指针 移 到 框架 的 边框 
上 ， 当 鼠标 变 为 双 辐 箭头 时 ， 按 下 鼠标 左 键 并 拖 动 鼠 标 ， 即 可 改变 框架 的 大 小 。 


Dis. 5.2 设置 框架 的 背景 


与 其 他 页 面 布 局 工具 不 同 ， 不 能 在 框架 的 属性 面板 上 设置 框架 的 背景 ， 而 是 在 “页 面 
属性 ”对 话 框 中 进行 设置 。 这 也 很 好 理解 ， 因 为 每 个 框架 文件 都 是 一 个 独立 的 HTML 文 件 。 
下 而 通过 一 个 休 竺 例子 泛 示 设置 框 淋 至 景 的 操作 方法 。 
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01. 新 建 一 个 HTML 文件 ， 然 后 插入 一 个 预 置 框架 ， 并 在 各 个 框架 中 输入 需要 的 内 容 。 
如 图 8-16 所 示 。 


| umedirameset- Ld (XHTIL]* [Ie Is O XS - GU [Monhoo] ooo 
文件 中 wap zuo €m5 WS S5 IAD Wow Wh feu 
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*] pc 98 
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*27? 13 2:28. A 


图 8-16 ”初始 页 面 效果 图 8-17 设置 页 面 属性 后 的 页 面 效 打 


02. 将 光标 放置 在 页 面 项 部 的 框架 中 ， 执 行 “ 修 改 ”/“ 页 面 属性 ”人 命令， 打开“ 页 
面 属性 ”对 话 框 。 

03 在 “ 形 景 图 像 ” 文 本 框 中 输入 所 需要 的 背景 图 像 的 地 址 。 

04 昌 同 理 ， 设 症 堪 侧 框架 的 育 景 颜色 为 淡 黄 色 ， 并 在 “链接 ”分 关中 设 症 “ 链 接 颜 
色 ” 为 绿色 ，“ 下划线 样式 ”为 “始终 无 下 划 线 ”。 

05 四 执行 “文件 ”/“ 你 和 存 全 部 ”命令 ， 你 存 框 染 集 文件 和 所 有 框 染 文件 。 

06. JZFIZYEDU Wi dE TAL. AORUIEIS-1THI - 


[18.5.3 在 框架 中 打开 文档 


采用 框架 结构 ， 一 个 原因 是 为 了 在 同一 窗口 中 可 以 同时 显示 多 个 文件 ， 另 一 个 原因 是 
可 以 及 用 导航 条 拉 术 方便 地 实现 各 文件 之 间 的 切换 。 经 第 见 到 的 系统 帮助 文件 束 是 一 个 上 典 
型 的 框 染 文件 ， 在 页 面 左 侧 早 击 了 帮助 主题 后 ， 页 面 右 侧 显示 相应 的 帮助 信息 。 其 原理 就 
征 为 不 同 的 帮助 主题 指定 链接 文件 ， 并 指定 链接 文件 在 右 侧 的 框架 中 打开 。 

要 在 一 个 框架 中 使 用 链接 以 打开 为 一 个 框架 中 的 文档 , 必须 设置 链接 目标 。 链 接 的 “ 目 
标 ” 属 性 指定 在 其 中 打开 链接 的 内 容 的 框 染 或 窗口 。 下 和 面 以 一 个 简单 例子 演示 在 一 个 框 淋 
中 打开 文档 的 操作 方法 。 

01 继续 上 一 市 的 例子 。 在 设计 视图 中 ， 选 择 要 作为 超级 链接 的 文本 或 对 象 ， 本 例 
选择 堪 侧 框 染 中 的 “图 厂 二 ”。 

02. 在 属性 检查 融 的 “链接 ” 域 中 ， 单 击 文件 夹 图 标 并 选择 要 链接 到 的 文件 。 

03 晤 在 “目标 ”弹出 式 末 单 中 ,选择 打开 链接 文档 的 框架 或 窗口 。 本 例 选择 “main”， 
即 右 侧 框 染 。 

在 一 疝 中 ， 在 属性 检查 带 中 命名 了 框架 ， 所 以 框架 名 称 出 现在 “目标 ”下 拉 列 表 中 。 
选择 该 项 ,表示 在 该 命名 的 框 染 中 打开 链接 页 面 , 同时 蕉 换 该 框架 中 原 有 的 内 容 。“ 目 标 ” 
下拉 列表 中 的 其 他 选项 的 功能 已 在 本 书 前 面 的 章节 中 介绍 过 了 ， 在 此 不 再 重复 。 

04 旧 保存 文档 。 并 按 下 F12 键 在 浏览 右 中 预览 页 面 效 琳 。 
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提示 : 只 有 在 框架 集 内 编辑 文档 时 才 显 示 框 架 名 称 。 在 文档 目 身 的 文档 窗口 中 编辑 该 文档 时 《在 框架 集 
之 外 ) ， 框 架 名 称 不 显示 在 “目标 ”弹出 式 菜 单 中 。 如 果 正 编辑 框 染 集 外 的 文档 ， 则 可 以 将 目标 框 染 的 
名 称 键 入 “目标 ”文本 框 中 。 如 果 正 链接 到 站 点 外 的 东 一 页 面 ， 请 始终 使 用 _top Ek blank 来 确保 该 页 面 


\ 会 显示 为 站 点 的 一 部 分 。 


[Lis. 5.4 删除 框架 


删 际 框 染 的 操作 比较 特殊 。 硅 按照 删除 其 他 页 面 元 际 的 方法 ， 选 中 框 染 之 后 按 Delete 
键 ， 用 户 会 发 现 ， 框 以 依旧 保留 在 页 面 中 ， 而 不 是 像 其 它 对 象 那 样 被 删 摊 。 删 除 框架 的 方 
法 如 下 : 

CD 将 光标 放 在 框架 的 边框 上 。 

(2) 当 光 标 会 变 为 双向 箭头 时 按 住 鼠标 左 键 ， 将 框架 的 边框 拖 出 父 框 架 或 页 面 之 外 ， 
即 可 将 这 个 框架 删除 。 

如 果 对 HTML 语 言 比较 熟悉 ， 用 户 还 可 以 直接 在 文档 的 HTML 代 码 中 删除 框架 。 


8. 6 框架 应 用 示例 


以 上 疝 读者 介绍 了 在 Dreamweaver CS5 中 框架 的 创建 与 设置 ， 下 面 将 完成 一 个 包含 框 
染 结 构 的 页 面 制作 ， 以 加 深 读者 对 框架 的 理解 。 本 例 页 面 由 三 个 框 染 组 成 ， 上 框架 、 左 下 
框架 和 右 下 框架 。 分 别 用 于 显示 主题 、 导 航 和 教程 的 内 容 。 当 单 击 导 航 按 钮 时 ， 右 下 框架 
将 切换 到 想 要 浏览 的 内 容 。 

01. 新 建 一 个 HTML 页 面 ， 执 行 “ 查 看 ”/“ 可 视 化 助理 ”/“ 框 架 边 框 ” 菜 单 命令 显 
示 文 档 窗 口 的 框架 边框 。 

02 将 鼠标 移动 文档 窗口 的 上 边 治 ， 当 鼠标 指针 变 为 上 下 的 双 回 箭头 时 ， 按 下 鼠标 
左 键 并 拖 动 到 合适 的 位 置 。 此 时 文档 窗口 被 一 条 水 平 的 框架 边框 分 割 为 上 下 两 部 分 。 

03 和 选中 下 方 的 框架 ， 单 击 “ 插 入 ” 栏 “ 布 局 ”面板 上 的 山 按 钮 ， 在 此 框架 中 髓 套 
一 个 框架 集 ， 调 整 框架 大 小 。 

04 dAír "fal" / "TEARS" edv. 1T2F HEART mud. fEYADBCpIXGH EAE 
的 各 个 区 域 ， 在 属性 面板 中 为 选中 的 区 域 命名 。 本 例 中 ， 由 上 到 下 ， 由 左 到 右 依次 命名 为 
“标题 柱 ”、“ 链 接 栏 ” 和 “内 容 柱 ”。 

05 Xtrp "EU" 框架 ， 单 击 鼠 标 右键 ， 从 弹出 的 上 下 文 菜单 中 选择 “页 面 属 性 ” 
命令 ， 并 在 弹出 的 对 话 框 中 为 此 框 染 选择 背景 图 像 。 同 理 ， 为 其 他 两 个 框架 设置 背景 图 像 
和 闫 色 。 此 时 的 页 面 效 果 如 图 8-18 所 示 。 

06. 在 “标题 栏 ” 框 架 中 输入 文本 “WELCOME”， 并 在 文本 属性 面板 设置 文本 的 字体 、 
大 小 和 闫 色 。 

07 在 其 他 两 个 框架 中 输入 文本 ， 并 进行 文本 属性 设置 ， 此 时 得 到 的 设计 视图 如 图 
8-19 所 示 。 完 成 了 以 上 步骤 后 ， 页 面 制作 工作 完毕 。 

08. 保存 页 面 。 按 下 Fl12 键 ， 即 可 在 浏览 右 中 预览 最 终 效 果 图 。 
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图 8-18 ”设置 背景 色 后 的 框架 效果 图 8-19 ”设置 背景 色 后 的 框架 效果 


前 面 的 儿童 已 制作 了 主页 的 各 个 部 分 。 在 本 廊 中 ， 将 使 用 框架 将 各 个 部 分 进行 规划 ， 
以 形成 一 个 完整 的 页 面 。 步 又 如 下 : 

和 019 打开 已 基本 完成 的 主页 index. html. 

02 肯 选择 “文件 ”/“ 另 存 为 ”命令 ， 在 弹出 的 对 话 框 中 设置 文件 名 为 photo. html. 
即 导航 图 片 “ 伊 人 风尚” 的 链接 目标 。 

03 删除 页 面 中 的 正文 内 容 ， 只 保留 页 面 L060、 导 航 条 和 正文 部 分 前 两 行 的 文字 和 
图 片 。 此 时 的 页 面 效 果 如 图 8-20 所 示 。 


首要 风声 


欢迎 党 临 我 的 小 屋 


9 [前 总 jx = mex 5v LX/1 E 
图 8-20 Jn vi I CR 


和 04 有 选中 正文 部 分 的 其 他 三 行 ， 单 击 属 性 面板 上 的 合并 单元 格 按钮 ， 将 选中 的 三 行 
合并 为 一 行 。 并 设置 单元 格 内 容 的 水 平 对 章 方式 为 “居中 对 章 ”; 牌 御 对 齐 方式 为 “顶端 ”。 

和 0 5 月 将 光标 放置 在 合并 后 的 单元 格 中 ， 打 开 “ 插 入 ”浮动 面板 ， 并 切换 到 “布局 ” 
面板 。 然 后 单 击 “ 布 局 ”面板 上 的 IFrame 回 图 标 ， 在 页 面 中 插入 一 个 浮动 帧 框架 。 此 时 的 
页 面 效 来 如 图 8-21 所 示 。 

06 和 在 “代码 ”视图 中 ， 将 IFrame 的 标记 <iframe>《/iframe》 修 改 为 如 下 代码 : 

<iframe src=”images/xiangce/index.html” name= il” width=496 height=540 
bgcolor-green^c/iframe» 

其 中 ，src= images/xiangce/index. html 表示 在 浮动 由 框架 中 显示 制作 的 网 站 相册 


Xbady' dio OuabLa 
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Kl8-21 插入 IFrame 


和 07 生 保存 页 面 ， 并 按 F12 键 在 浏览 器 中 预览 页 面 。 如 图 8-22 所 示 。 
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图 8-22 ”页面 预览 效果 
单 击 其 中 一 幅 缩 略 岁 , 即 可 在 浮动 帧 框架 中 打开 所 选 图 片 的 大 图 , 效果 如 网 8-23 所 示 。 
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单 击 链接 文本 “前 一 个 ”、 “下 一 个 ”， 即 可 在 图 片 中 切换 浏览 。 单 击 “ 首 页 ?” 
即 可 返回 到 如 图 8-20 所 示 的 页 面 。 
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应 用 表 早 


表单 是 交互 式 网 站 的 基础 ， 在 Web 上 的 用 途 很 多 ， 包 
括 用 户 注 册 、 调 查 问卷 、 讨 论 区 、 电 子 商务 、 客 户 订单 等 
等 , 这 些 功能 通常 是 由 表单 结合 动态 数据 库 实现 的 。 利用 
人 
S p n I TM 

而 实现 收集 用 户 信 息 、 提 供电 子 商 务 服 务 和 获取 用 户 反 馈 
信息 等 功能 。 表单 是 网 站 与 浏览 者 之 间 沟 通 的 桥 


梁 。 


00600 


创建 表单 网 页 
使 用 Spry 表单 验证 控件 


实例 制作 之 制作 留言 板 


Yr 


FI E w a 
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中 


一 个 完整 的 表单 应 该 有 两 个 重要 组 成 部 分 : 一 是 全 有 表单 和 表单 元 素 的 网 页 文档 ， 用 
于 收集 用 户 输入 的 信息 ; 男 一 个 是 用 于 处 理 用 户 输入 信息 的 服务 器 问 应 用 程序 或 客户 问 脚 
本 ， 如 CGI、JSP、ASP 等 。 

用 户 提交 表单 之 后 , 即 可 将 表单 内 容 传送 到 服务 右上, 并 由 事先 撰写 的 脚本 程序 处 理 ， 
最 后 服务 器 再 将 处 理 结 果 传 回 给 浏览 者 ， 即 提交 表单 之 后 出 现 的 页 面 。 

表单 中 包含 多 各 对象 〈( 也 称 作 表单 控件 ) 。 例 如 ， 用 于 输入 文字 的 文本 域 、 用 于 发 送 
命令 的 按钮 、 用 于 选择 的 单 选 框 和 复 选 框 、 用 于 设置 信息 的 列表 和 有 来 单 守 。 所 有 这 些 控件 
与 在 Windows 各 种 应 用 程序 中 过 到 的 非常 相似 。 如 果 熟 悉 某 种 脚本 语言 ， 用 户 还 可 以 编写 
脚本 或 应 用 程序 来 验证 输入 信息 的 正确 性 。 例 如 ， 可 以 检查 某 个 必须 填写 的 文本 域 是 否 包 
含 了 一 个 特定 的 值 。 

Dreamweaver CS5 还 集成 了 Adobe 公 司 的 轻 量 级 的 AJAX 框 架 Spry。 利 用 一 系列 预 置 的 表 
单 验证 控件 ， 用 户 可 以 更 加 轻松 快捷 地 以 可 视 化 方式 设计 、 开 发 和 部 署 动态 用 户 界 面 。 


[Lije. 1. 1 插入 表单 域 


制作 表单 网 页 ， 首 先 要 在 文档 中 插入 表单 。 插 入 表单 的 操作 如 下 : 

(1) 新 建 一 个 文档 ， 将 光标 置 于 要 插入 表单 的 位 置 。 

(20 执行 “插入 ”/“ 表 单 ”/“ 表 时 ”来 单 命令 ,或 者 在 如 图 9-1 所 示 的 “表单 ” 面 
板 上 单 击 量 按钮 ， 在 页 面 中 添加 表单 。 

插入 后 的 表单 如 图 9-2 所 未 。 


Hoja xXx) o 0 0 0 0 0 708 Zee 999 

表单 = 四 | 3| erecti rm 

emm gg | 

mol|lgr| m3 s 表单 边 柜 

cá wer [W]49 Q jum — «zm 
图 9-1 表单 面板 图 9-2 ”表单 边框 


在 设计 视图 中 ， 用 红色 的 点 状 轮廓 线 表示 插入 的 表单 。 如 果 看 不 到 轮廓 线 ， 可 以 执行 
“查看 ”/“ 可 视 化 助理 ”/“ 隐 藏 所 有 ”命令 ， 显 示 红 色 的 轮廓 线 。 


提示 : 表单 标记 可 以 矢 套 在 其 他 HTML 标记 中 ， 其 他 HTML 标记 也 可 以 矢 套 在 表单 中 。 但 是 ， 一 个 表单 不 
能 网 套 在 为 一 个 表单 中 。 

(3) 选择 “窗口 ”/“ 属 性 ”命令 ， 打 开 如 图 9-3 所 示 的 表单 属性 面板 ， 对 表单 参数 
进行 设置 。 

属性 面板 中 的 各 个 参数 简要 介绍 如 下 : 

e “表单 ID”: 对 表单 命名 以 进行 识别 。 
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该 名 称 必须 唯一 ， 对 应 于 《<form? 标 记 的 1D 属性。 只 有 为 表单 命名 后 表单 才能 锐 脚 本 语 
言 引 用 或 控制 。 

e “动作 ”: 注 明 用 于 处 理 表 单 信息 的 脚本 或 动态 页 面 路 径 ， 该 属性 决定 如 何 处 理 

表单 内 容 。 可 以 直接 输入 URL， 或 者 单 击 右边 的 文件 夹 图 标 浏览 选择 URL。 通 第 个 设 

定 为 运行 一 个 特定 的 脚本 程序 或 者 及 送 e-mail 的 URL. 

e “方法 ”: 选择 将 表单 数据 传输 到 服务 占 的 方法 。 


tt li 


I] 表单 ID 动作 c Bü | 8380 无 vi 
formi 方法 POST v| 编码 类 型 | v| 


9-3 ”表单 属性 面板 


“POST” 方 法 将 在 HTTP 请 求 中 租 入 表单 数据 ， 将 表单 值 以 消息 方式 大 出 ， 对 传达 
的 数据 量 没有 限制 。 

“GET” 方 法 将 被 所 交 的 表 早 值 作为 请 求 该 页 面 的 URL 的 附加 值 发 送 ， 对 传送 的 数据 量 
做 了 限制 。 

“默认 ”方法 使 用 浏览 费 的 轩 认 设置 将 表单 数据 发 送 到 服务 占 。 通 第 ， 上 默 认 方 法 为 
GET。 


技巧 : 不 要 使 用 GET 方法 发 送 长 表单 。URL 的 长 度 限 制 在 8192 个 字符 以 内 。 如 采 发 送 的 数据 量 太 大 ， 数 
据 将 被 截断 ， 从 而 导 人 臻 意外 的 或 失败 的 处 理 结果 。 而 且 ， 在 发 送 机 密 用 户 名 和 密码 、 信 用 卡号 或 其 他 机 
密 信 息 时 ， 用 GET 方法 传递 信息 不 安全 。 


e “目标 ”: EH bg EL HP Ez E RREHEBpRIBIBIA S. IRA IS D MIASTIJT: 

则 打开 一 个 具有 该 名 称 的 新 窗口 。 

@ “编码 类 型 ”: 指定 对 提交 给 服务 占 进 行 处 理 的 数据 使 用 的 编码 类 型 。 

默认 设置 application/x-www-form-urlencode 通 常 与 PO0ST 方 法 协同 使 用 。 如 果 要 创建 
文件 上 传 域 ， 则 应 指定 multipart/form-data MIME 类 型 。 

在 文档 窗口 中 插入 表单 之 后 ， 选 中 表单 ， 可 以 在 “代码 ”视图 中 看 到 类 似 如 下 的 代码 : 

<form  action-'result.asp '  method-"post/ name= formnl” target=” blank” 
id= firstform > 

</form> 

这 段 代 码 表示 将 名 为 firstform 的 表单 以 post 的 方式 提交 给 result. asp 进 行 处 理 ， 且 
提交 结束 在 一 个 新 的 页 面 显示 ， 提 区 的 MIME 纺 码 为 默认 的 application/x-www-form 
-urlencode 类 型 。 

创建 表单 之 后 ， 束 可 以 在 表单 内 创建 各 种 表单 对 象 了 。 表 单 的 所 有 元 素 都 应 包含 在 表 
单 标签 form>… C/form»Z.'H, 4EDreamweaver CS5 中 ， 对 表单 对 象 的 操作 命令 ， 主 要 集 
中 在 “插入 ”/ “表单 ”/“ 表 单 对 象 ”豆单 命令 中 ;或 如 网 9-1 所 示 的 “插入 ”/ “表单 ” 
面板 中 。 下 和 面 对 这 些 表单 元 素 进 行 休 单 的 介绍 : 

LJ: 文本 域 ， 在 表单 中 插入 文本 输入 框 。 

Eu. 在 表单 中 插入 包含 隐藏 的 信息 。 

下 ;在 表单 中 插入 可 以 输入 多 行文 本 的 文本 域 。 
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: 单 选 按钮 ， 用 于 在 提供 的 多 个 选项 中 做 出 单个 选择 。 

: 复 选 框 ， 用 于 在 提供 的 多 个 选项 中 做 出 多 个 选择 。 

单 选 按钮 组 ， 用 于 创建 多 个 单 选 按钮 ， 并 使 这 些 单 选 按钮 成 为 一 组 。 
Si 列表 /菜单 ， 在 网 页 中 以 列表 的 形式 为 用 户 提供 一 系列 的 预 设 选择 项 。 
: 跳 转 菜单 ， 提 供 一 个 包含 跳 转动 作 的 菜单 列表 。 

图 形 按钮 ， 用 图 形 对 象 替换 表单 中 的 标准 按钮 对 象 。 

文件 域 ， 在 网 页 中 插入 一 个 文件 地 址 的 输入 选择 栏 。 

Cl. 按钮 ， 用 于 触发 服务 器 端 脚本 处 理 程序 的 表单 对 象 。 

e PRAE. 

在 表单 中 插入 该 对 象 时 ， 将 拆 分 文档 窗口 ， 并 排 显示 代码 视图 和 设计 视图 ， 并 在 代码 
视图 中 添加 《<label1》 标 签 和 </1abel1》 标 签 ， 在 这 两 个 标签 之 间 用 户 可 以 输入 相应 的 文本 或 
A, 

DL. 字段 集 ， 用 于 将 它 所 包围 的 元 素 用 线 框 衬托 起 来 。 

在 表单 中 插入 该 对 象 时 ， 将 弹出 一 个 “字段 集 ” 对 话 框 。 在 对 话 框 的 “标签 ”文本 框 
中 可 以 输入 内 容 ， 系 统 上 自动 将 类 似 如 下 的 标签 和 代码 加 入 到 表单 源 代 码 中 。 效 果 如 图 9-4 
所 示 。 


字段 集 一 一 一 一 一 一 
pe New Year! 
<fieldset> 


《legend》 字 上 段 集 《/ legend? 
Happy New Year! 
</fieldset> 


E) [g [Is 


Eg € [D | 


图 9-4 字段 集 


tà: Spry 验证 文本 域 ， 用 于 在 站 点 访问 者 输入 文本 时 显示 文本 的 状态 。 人 例如， 有效 
或 无 效 或 必需 值 等 。 

每 当 验 证 文本 域 构件 以 用 户 交 互 方式 进入 其 中 一 种 状态 时 ，Spry 框架 逻辑 会 在 运行 
时 间 该 构件 的 HTML. 容器 应 用 特定 的 CSS 类 。 

-h: Spry 验证 文本 区 域 ， 该 区 域 在 用 户 输入 几 个 文本 句子 时 显示 文本 的 状态 。 

如 果 文 本 区 域 是 必 填 域 ， 而 用 户 没有 输入 任何 文本 ， 该 构件 将 返回 一 条 消息 ， 声 明 必 
须 输 入 值 。 

Yi. Spry 验证 复 选 框 构件 ， 是 HTML 表单 中 的 一 个 或 一 组 复 选 框 ， 该 复 选 框 在 用 户 
选择 (或 没有 选择 ) 复 选 框 时 会 显示 构件 的 状态 。 

E Spry 验证 选择 构件 ， 是 一 个 下 拉 菜 单 ， 该 菜单 在 用 户 进 行 选择 时 会 显示 构件 的 
状态 (有效 或 无 效 )。 

EU: Spry 验证 密码 构件 ， 是 一 个 密码 文本 域 ， 可 用 于 强制 执行 密码 规则 (例如 ， 字 
符 的 数目 和 类 型 )。 该 构件 根据 用 户 的 输入 提供 警告 或 错误 消息 。 

£5. Spry 验证 确认 构件 ， 是 一 个 文本 域 或 密码 表单 域 ， 当 用 户 输 入 的 值 与 同一 表单 
中 类 似 域 的 值 不 匹配 时 ， 该 构件 将 显示 有 效 或 无 效 状态 。 

验证 确认 构件 还 可 以 与 验证 文本 域 构 件 一 起 使 用 ， 用 于 验证 电子 邮件 地 址 。 

5: Spry 验证 单 选 按 钮 组 构件 ， 是 一 组 单 选 按 钮 ， 可 支持 对 所 选 内 容 进 行 验 证 。 该 
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构件 可 强制 从 组 中 选择 一 个 单 选 按钮 。 


[Lj9. 1.2 文本 字段 和 文件 域 


“文本 字段 ” 即 网 页 中 供用 户 输 入 文本 的 区 域 ，“ 文 本 字段 ”分 为 单行 、 多 行 和 密码 
三 种 类 型 ， 可 以 接受 任何 类 型 的 文本 、 了 字母 或 数学 。 
文件 域 与 单行 文本 字段 非常 相似 ， 不 同 的 是 文件 域 多 了 一 个 “浏览 ”按钮 ， 用 于 浏览 
选择 随 表 单一 起 上 传 的 文件 。 利 用 文件 域 的 功能 ， 可 以 将 图 像 文件 、 压 纵 文 件 、 可 执行 文 
件 等 本 地 计算 机 上 的 文件 上 传 到 服务 右上， 前 提 条 件 是 服务 器 文 持 文件 匿名 上 传 功能 。 
下 面 通过 一 个 价 单 实例 演示 在 文档 中 插入 “单行 文本 域 ”、“ 多 行文 本 域 ”、“ 密 三 
域 ” 和 文件 域 的 具体 操作 。 
01 新 建 一 个 HTML 文件 。 执 行 “ 插 入 ”/“ 表 单 ”/“ 表 单 ” 命 令 ， 或 者 单 击 “插入 ” 
栏 中 “表单 ”面板 上 的 日 按钮 ， 在 文档 中 插入 一 个 表单 。 
02. 在 表单 的 属性 面板 中 ， 将 表单 的 “MIME 类 型 ”设置 为 multipart/form-data， 并 
且 将 其 “方法 ”属性 设置 为 POST 方式 。 该 步 的 设置 主要 用 于 上 传 文件 。 
03 将 光标 置 于 表单 中 ， 输 入 “了 昵称: ”， 然 后 执行 “插入 ”/“ 表 单 ”/“ 文 本 字 
段 ” 荣 单 命 令 ， 或 单 击 “ 表 单 ” 面 板 中 的 插入 文本 字段 的 图 标 按钮 号 ， 即 可 在 表单 中 添加 
= A 
04 选中 该 文本 字段 ， 在 属性 设置 面板 左 侧 的 “文本 域 ” 下 方 的 文本 框 中 键入 字段 
的 名 称 “name”; 在 “字符 宽度 ”中 输入 20，“ 最 多 字符 数 ” 设 置 为 18; 在 “类 型 ” 单 选 
按钮 组 中 单 击 “单行 ”; 在 “初始 值 ”文本 框 输入 “行云流水 ”。 
议 者 需要 注意 ，“ 衬 符 宽 度 ” 用 于 设置 文本 字段 的 字符 宽度 ;而 “最 多 字符 数 ” 用 于 
设置 最 多 可 输入 的 字符 数 。 不 要 把 这 两 者 弄 混 消 。 
“文本 域 ” 用 于 设置 文本 字段 的 名 称 ， 该 名 称 可 以 被 脚本 或 程序 所 引用 ; “类 型 ”用 
于 设置 文本 字段 的 类 型 : “单行 ”用 于 输入 用 户 名 、 电 子 邮 件 等 单行 信息 ; “多 行 ” 用 于 
输入 留言 、 意见 等 内 容 较 多 的 文本 ;“ 密 码 ” 用 于 输入 密码 , 用 户 输入 的 所 有 文本 在 windovws 
系统 下 会 被 黑色 的 点 奉 换 显示 。“ 初 始 值 ” 用 于 设置 没有 在 文本 字段 中 输入 任何 值 时 ， 访 
文本 域 中 默认 显示 的 文本 。 
05 在 表单 中 按 Enter 键 后 ， 输 入 “密码 : ”， 并 单 击 “ 表 单 ” 面 板 上 的 口 图 标 添加 
第 二 个 文本 字段 。 然 后 在 属性 面板 中 设置 其 名 称 为 “pwd”; “字符 党 度 ”为 14，“ 最 多 
字符 数 ” 为 12，“ 类 型 ”为 “密码 ”; “初始 值 ” 为 “vanilla”。 
当 用 户 希 望 保 护 上 自己 的 输入 信息 不 被 他 人 看 到 时 , 束 可 以 使 用 密码 域 , 例如 ， 当 在 ATM 
上 输入 时 ，PIN 号 人 码 是 隐藏 的 。 输 入 密码 域 中 的 信息 不 会 以 任何 方式 被 加 密 ， 并 且 当 发 运 
到 Web 管 理 者 手中 时 ， 它 会 以 常规 文本 的 形式 显示 。 
06 在 表单 中 按 Enter 键 换行 ， 输 入 “ 目 我 介绍 : ”， 并 单 击 “表单 ”面板 上 的 吕 图 
标 添 加 第 三 个 文本 字段 。 然 后 在 属性 面板 中 设置 其 名 称 为 “info”; “字符 宽度 ”为 50， 
“ 行 数 ”为 5， 即 最 多 能 输入 的 文本 行 数 为 5 行 ， “类 型 ”为 “多 行 ”; “初始 值 ” 为 “个 
人 资料 说 明 ”， 如 图 9-5 所 示 。 
07. 在 表 蛙 中 按 Enter 键 换行 ， 输 入 “个 人 风采 : ”， 并 执行 “插入”/“ 表 蛙 ”/ 


158 


Fr E wa 
应 用 表单 [=] 


“文件 域 ”菜单 命令 ,或 直接 单 击 “ 表 单 ” 面 板 上 的 文件 域 昌 图 标 添加 一 个 文件 域 。 然 后 
在 属性 面板 中 设置 其 名 称 为 “photo”; “学 和 从 宽度 ”为 30，“ 最 多 子 符 数 ” 为 20， 如 图 


9-6 所 ZN o 
尾 性 
mm 文本 域 字符 宽度 包 ) 50 类 型 Oso Os&qgo — OS 类 (C) x "| 9 
| info cm 初始 值 DD | 个 人 资料 说 明 区 
器] 禁用 部 ) 
器 只 读 双 ) 区 
图 9-5 ”多 行文 本 字段 的 属性 设置 面板 
属性 
| [ 立 件 域名 称 。 ” 字符 宽度 QO 30 类 (C) | 无 iv ® 
photo 最 多 字符 数 (M) 20 rA 


图 9-6 文件 域 的 属性 设置 面板 


有 时 候 ， 需 要 访问 者 提供 的 信息 过 于 复杂 ， 而 无 法 在 文本 域 中 达成 ， 如 : 经 过 排版 的 
简历 、 图 形 文件 或 其 他 文件 。 这 种 情况 下 就 可 以 通过 在 网 页 中 加 入 文件 域 来 达到 这 个 目的 。 
08. 保存 文档 。 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 面 ， 如 图 9-7 所 示 。 


昵称 ， | 行云流水 


密码 :， eeeeeee 
个 人 资料 说 明 


图 9-7 页 面 效果 


[[lo. 1.3 下 拉 菜 单 与 列表 


下 拉 亲 里 和 列表 者 能够 给 浏览 者 以 列表 的 形式 提供 一 系列 的 预 设 选择 项 。 与 单 选 按钮 
和 复 选 征 不 同 的 是 ， 下 拉 沫 单 和 列表 能 够 提供 多 个 可 选项 ， 这 对 于 天 化 版 面 和 空间 有 限 的 
页 面 来 说 ， 是 非 钊 不 错 的 选择 。 
尽 过 在 属性 面板 中 创建 下 拉 沫 单 和 滚动 列表 的 方式 是 一 样 的 ， 但 是 下 拉 沫 单 和 滚动 列 
表 却 提供 了 不 同 的 功能 。 下 拉 沫 单 通过 下 拉 方 式 显 示 多 个 可 选项 ， 一 般 只 允许 选择 一 个 可 


MA 一 -下 入 


选项 。 列 表 通 过 类 似 浏览 器 滚动 条 的 滚动 框 显示 多 个 可 选项 , 并 可 以 自 定 义 滚 动 框 的 行 高 ， 
允许 浏览 者 选择 一 个 或 多 个 可 选项 。 

一 般 而 言 ， 当 可 用 的 页 面 空 间 非 第 小 的 时 候 ， 使 用 下 拉 沫 单 ; 当 需 要 控制 显示 的 选项 
数 时 ， 通 党 使 用 深 动 列表 。 

下 和 面 通过 一 个 简单 例子 演示 在 表单 中 插入 下 拉 表 单 和 深 动 列表 的 方法 。 

01. 狐 建 一 个 HTML 文档 。 设 置 好 页 面 属 性 后 ， 执 行 “ 插 入 ”/“ 表 单 ”/“ 表 单 ” 命 
令 ; 或 者 单 击 “表单 ”面板 中 的 量 按 钮 ， 在 文档 中 插入 一 个 表单 。 
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02 旧 在 页 面 中 输入 “您 经 音 使 用 Adobe 的 哪些 产品 : ”， 然 后 执行 “插入 ”/ “表单 ” 
/“ 列 表 / 菜 单 ” 命 令 ; 或 直接 单 击 “ 表 单 ” 面 板 中 的 国 按 钮 图 标 ， 在 表单 中 插入 一 个 “ 列 
A/3RU NA. 

03. i; jRLATTJ Ue / 358." 028, 在 属性 和 面板 中 设置 其 名 称 为 “product”; “类 

型 ”为 “列表 ”; “局 上 度 ” 为 3， 且 “人 允许 多 选 ”。 

04. 单 击 “ 列 表 值 ”按钮 打开 “列表 值 ” 对 话 框 编辑 列表 项 目 。 在 “项 目标 签 ” 下 
单 击 鼠 标 ， 当 文本 框 变 为 可 编辑 状态 时 ， 输 入 需要 的 列表 项 ， 访 项 将 显示 在 列表 框 中 。 然 
后 单 击 “ 值 ”下 面 的 文本 框 ， 输 入 该 列表 项 目 对 应 的 值 。 

05 朋 单 击 对 话 框 顶部 的 四 | 按钮 添加 其 他 4 个 项 目 ，“ 项 目标 签 ” 分 别 为 : Adobe 
Dreamweaver. Adobe Fireworks. Adobe Flash 和 Adobe Reader， 并 输入 其 对 应 的 值 。 单 
击 “ 确 定 ” 完 成 列表 值 设 置 。 

06 单 击 “ 确 定 ” 按 钮 返回 到 列表 的 属性 面板 ， 在 “初始 化 时 选 定 ”列表 框 中 选择 
“Adobe Photoshop" 

e “列表 / 末 单 ”: 设置 “列表 /来 单 ” 的 名 称 。 访 名称 可 以 被 脚本 或 程序 引用 。 
“类 型 ”， 指 定 该 对 象 是 下 拉 末 单 ， 还 是 显示 一 个 列 有 项 目的 可 深 动 列表 。 
“高 度 ”: 用 于 设置 列表 显示 的 行 数 。 

“人 允许 多 选 ”: 用 于 设置 是 否 人 允许 选 多 项 列表 值 。 
“列表 值 ”: 用 于 设置 列表 内 容 。 在 这 个 对 话 框 中 可 以 添加 或 修改 “列表 /菜单 ” 

的 项 目 。 

e ^25" : 用 于 议 置 应 用 于 “列表 /来 单 ” 的 CSS 样式 。 

e “初始 化 时 选 定 ”: HbTG3xRUAEJAE/SERRC BIB. 

07 1 按照 上 和 耐 的 方法 ， 在 页 面 中 插入 一 个 下 拉 表 和 蛙 ， 即 插入 “列表 / 末 单 ”对 象 后 ， 
在 属性 面板 中 将 “类 型 ”设置 为 “ 采 单 ”。 并 设置 其 列表 值 ， 如 图 9-8 所 示 。 

08 9 蛙 击 “确定 ”按钮 返回 到 有 亲 单 的 属性 面板， 在 “初始 化 时 选 定 ” 列 表 框 中 选择 
“Microsoft FrontPage” 


09 9 你 存 文档 ， 并 按 下 F12 键 在 浏览 融 中 预 虹 效果。 如 图 9-9 所 未 。 


ow 列表 值 Adaba Firewarks A 
[*)(-) (4)(v) 
上 EE pez E. 
EE iB 取消 你 经 芝 使 用 dobe 的 哪些 产品 : 
[Mi er m a age | FrontPage 
iin e eS — emi TERERSREE—-CDEEREXKBJPASA. | Microsoft FrontPage E 
Micrasaft FrantPauge 
Allaire HomeSite 3 
图 9-8 下 拉 采 单 的 “列表 值 ” 对 话 框 图 9-9 列表 /这 单 的 预览 效果 


在 列表 中 ， 按 下 Shift 或 Ctr]1 键 ， 即 可 进行 多 选 。 如 朱 要 奏 看 其 他 列表 项 ， 可 以 拖 动 
列表 右 侧 的 滚动 条 。 单 击 下 拉 沫 单 右 侧 的 箭头 ， 即 可 奉 看 所有 的 列表 项 。 


Do 1. 4 跳 转 荣 单 


在 实际 的 网 站 建设 过 程 中 ,通常 需 要 在 一 些 网 页 上 做 站 点 跳 转 的 效 末 ,利用 跳 转 订单 
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可 以 轻松 实现 。 BE SEEIPIERGS T RXASTD T Pocos. 但 它们 的 本 质 功 能 却 是 完全 不 同 的 。 
跳 转 菜单 一 般 用 于 选择 一 个 网 页 地 址 ， 浏 览 融 将 会 目 动 跳 转 到 指定 的 页 面 。 这 项 功能 特别 
适合 于 友情 链接 、 导 航 系 统 等 。 
下 面 通过 一 个 简单 实例 演示 在 文档 中 插入 跳 转 采 单 的 具体 操作 。 
01 狐 建 一 个 HIML 文 要 。 执 行 “ 搬 入 ”/“ 表 单 ”/“ 表 单 ” 命 令 ， 或 者 单 击 插入 栏 
中 表单 面板 的 日 按钮 ， 在 页 面 中 插入 一 个 表单 。 
02 执行 “插入 ”/“ 表 单 ”/“ 跳 转 玉音 ”命令 ， 或 单 击 “表单 ”插入 面板 上 的 插 
入 跳 转 菜单 国 按钮 ， 打 开 如 图 9-10 所 示 的 “插入 跳 转 菜单 ”对 话 框 。 
03 “有 末 单 项 ”列表 框 中 显示 已 有 或 默认 的 末日 项 名 称 〈 例 如 iteml) ， 访 名 称 可 
以 被 脚本 或 程序 所 引用 。 在 “文本 ”文本 框 中 键入 采 单 项 的 名 称 ， 该 名 称 将 显示 在 跳 转 且 
单 中 。 本 例 输入 “Microsoft”。 
04 月 在 “选择 时 ， 转 到 URL” 文 本 框 中 键入 菜单 项 链接 的 目标 ， 或 单 击 “ 浏 览 ” 按 锂 
找到 需要 链接 的 文件 。 本 例 输入 “http://www. microsoft. com. cn”。 
05 四 在 “打开 URL 于 ”下 拉 有 来 单 中 设置 打开 链接 目标 的 位 置 。 本 例 使 用 默认 设置 。 
06 9 在 “六 单 ID” 文 本 框 中 设置 跳 转 纺 单 的 名 称 。 本 例 使 用 献 认 设置 。 
07 肯 选中 “ 沫 单 之 后 插入 前 往 按钮 ” 复 选 框 ， 即 在 染 单 后 面 添加 “前 往 ” 按 钮 。 
该 者 要 注意 的 是 ， 在 跳 转 下 拉 玉 单 中 选择 第 1 个 选项 时 ， 无 法 立即 跳 转 到 指定 的 URL， 
这 个 “前 往 ” 抽 钮 瓯 是 要 激活 这 个 功能 。 当 在 跳 转 这 单 中 选择 第 1 个 选项 时 ， 然 后 单 击 该 
按钮 即 可 跳 转 到 指定 的 URL。 
08 “和 更改 URL 后 选择 第 一 个 项 目 ” 用 于 设置 当 URL 改 变 后 是 否 选择 第 一 个 染 单 项 。 
本 例 不 选中 此 复 选 框 。 
09 朋 单 击 “ 菜 单项 ”列表 顶部 的 半 | 按 钮 ， 然 后 按照 本 例 第 (3) 到 第 (8) 的 方法 ， 
设置 其 他 来 单项 。 
如 果 不 需要 某 项 ， 可 以 选中 该 项 后 ， 单 击 二 删除 。 单 击 二 |、 工 | 按钮 ， 可 以 向 上 或 向 
下 调整 来 单项 的 位 置 。 编 辑 完 成 后 的 “插入 跳 转 玉 单 ”对 话 框 如 图 9-11 所 示 。 


r 
r 
— @ 插入 跳 转 荣 单 o 
«Jc 4) (v) m «Jc A — 
suem. aS M Es 
obe ttp://www. adobe. com. cn 帮助 
帮助 
AB: [iteml XE: Macromedia 
选择 时 ， 转 到 URL: pum... 选择 时 ， 转 到 URL: http://www. macromedia. com pum... 
ES new Su — B 
菜单 ID: iumpMenul, 菜单 ID: jiumpMenul 
选项 ， 00 菜单 之 后 插入 前 往 按钮 wm. v ist ES BIS 
更 改 URL 后 选择 第 一 个 项 目 更 改 URL 后 选择 第 一 个 项 目 


图 9-10 “插入 跳 转 瑟 单 ”对 话 框 (1) 图 9-11 “插入 跳 转 且 单 ” 对 话 框 (2) 
10. 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 即 可 在 表单 中 插入 一 个 跳 转 腔 单 ， 如 岁 9-12 所 


11. 单 击 页 面 中 插入 的 跳 转 染 单 ， 在 属性 面板 中 指定 类 型 为 “ 沫 单 ”， 初 始 化 时 选 
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定 “Microsoft” 。 

12. 单 击 “ 有 前往” 按钮 ， 指 定 动作 为 “无 ”。 

13 肯 在 “ 投 钮 名 称 ” 中 设置 “前 往 ” 按 钮 的 名 称 ， 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
本 例 使 用 默认 设置 。 

14 在 “ 值 ” 文 本 框 中 输入 按钮 的 标签 。 本 例 输入 G0， 该 名 称 将 显示 在 按钮 上 。 

15 在 “动作 ” 单 选 按钮 组 中 选择 按钮 的 类 型 。 本 例 选择 “无 ”按钮 。 有 关 按 钮 的 
介绍 将 在 本 章 9. 1. 6 节 中 进行 讲解 。 

16 汪 保存 文档 ， 人 至 此 文档 创建 完毕 。 按 下 快捷 键 F12 即 可 在 浏览 器 中 预览 整个 页 面 。 
AR Ul 9-13 Tz « 


d 友情 链接 o 


图 9-12 ”插入 的 跳 转 菜 单 图 9-13 ”预览 跳 转 羔 单 的 效果 
在 跳 转 菜单 中 选择 一 个 菜单 项 ， 然 后 单 击 60 按 钮 ， 即 可 以 在 指定 的 窗口 中 打开 链接 的 
地 址 。 


[Llo. 1.5 单 选 按钮 与 复 选 杠 


在 表单 中 使 用 单 选 枉 和 复 选 框 可 以 设置 预定 义 的 选项 。 访 问 者 可 以 通过 点 击 单 选 框 或 
复 选 框 来 选择 预 置 的 选项 。 

单 选 框 和 复 选 框 的 区 别 在 于 它们 的 运作 方式 不 同 。 每 个 复 选 框 都 是 独立 的 ， 点 击 选中 
只 是 在 切换 单个 选项 的 选中 与 否 ， 因 此 可 以 选中 多 个 选项 。 而 单 选 框 所 有 的 待 选项 是 一 个 
整体 ， 对 于 选项 的 选择 具有 独占 性 ， 也 就 是 说 ， 在 单 选 框 的 竺 选项 中 ， 只 允许 有 一 个 选项 
处 于 被 选中 状态 。 

下 面 通过 一 个 简单 例子 演示 单 选 按钮 和 复 选 框 的 使 用 方法 。 

01. 继续 上 例 ， 将 光标 放置 于 “性 别 ” 单 元 格 后 一 个 单元 格 ， 单 击 “ 插 入 ” 栏 “ 表 
单 ” 和 面板 中 的 图 按 钮 ， 添 加 一 个 单 选 框 ， 在 此 单 选 框 后 键入 文本 “ 男 ”。 

02 六 在 属性 面板 中 为 新 添加 的 单 选 框 对 象 命名 “gender ”， 设 置 选 定 值 为 0， 初 始 状 
态 为 “未 选中 ”。 

e  “ 单 选 按钮 ”: 用 于 设置 单 选 按钮 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 

e  “ 选 定 值 ”: 用 于 设置 该 单 选 按 钮 被 选中 时 的 值 ， 这 个 值 将 会 随 表单 一 起 提交 。 

e “初始 状态 ”: 用 于 设置 单 选 按钮 的 初始 状态 。 同 一 组 单 选 按钮 中 只 能 有 一 个 按 

钮 的 初始 状态 是 选中 的 。 

e “类 ”: 用 于 设置 应 用 于 单 选 框 域 的 CSS 样式 。 

03 同 理 ， 再 添加 同名 为 “gender ”的 单 选 枉 ， 改 变 选 定 值 为 1， 并 在 单 选 框 后 键入 
文本 “ 女 ”。 此 时 结果 如 图 9-14 所 示 。 


MERI. 口 S IU 


图 9-14 插入 的 单 选 按钮 
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注意 : 由 于 单 选 按钮 是 以 组 为 单位 的 ， 因 此 所 有 的 单 选 按钮 都 必须 拥有 同一 个 名 称 ， 并 且 其 值 均 不 能 相 
Ig. 
AU AR D TRI FP AST 28 Dn SS RES] ER TEILT Ao, 388 3L 1 — 1 US JP CELA 
再 一 个 一 个 地 改名 ， 实 现 起 来 特别 烦琐 。 使 用 “ 单 选 按钮 组 ” 则 可 以 一 次 建立 一 组 单 选 鬼 
Hl c 
04 贞 单 击 “ 表 单 ” 面 板 中 的 “ 单 选 按钮 组 ”图 标 按钮 昌 ， 打 开 如 图 9-15 所 示 的 “ 单 
选 授 钮 组 ”对 话 框 。 


r |^ .| 
单 选 按钮 组 @ 单 选 按 钮 组 e 
名 称 : RadioGroupl 确定 名 称 : RadioGroupl 确定 
ASH: 村] (—) EZ mn &iERHI 本] [—) EZ - 

标签 值 帮助 8ERh 
单 选 dk 
E E 
布局 ， 使 用 : 换行 符 ( <br> 标签 ) 布局 ， PRO 换行 符 ( <br> 标签 ) 
表格 tdm 


图 9-15 “ 单 选 按钮 组 ”对 话 框 (1) 图 9-16 “ 单 选 按钮 组 ”对 话 框 《〈2 ) 


05 朋 在 “名 称 ” 文 本 框 中 定义 单 选 按钮 组 的 名 称 。 本 例 使 用 默认 设置 。 

06 在 “ 单 选 按钮 ”列表 框 中 定义 单 选 按钮 组 的 单 选 按钮 的 个 数 ， 以 及 代表 的 值 ， 
单 击 “ 标 签 ” 列 下 的 “ 单 选 ”， 该 文本 框 即 变 为 可 编辑 状态 ， 输 入 要 在 页 面 上 显示 的 单 选 
按钮 的 标签 ， 单 击 “ 值 ”下 面 的 “ 单 选 ”， 然 后 设置 该 单 选 按钮 被 选中 时 的 值 。 

07 朋 单 击 列表 框 左上 角 的 土 和 二 按钮 可 以 添加 和 减少 单 选 按钮 的 数目 。 

08. 单 击 列表 框 右 上 角 的 二 | 和 二 | 按钮 可 以 调整 当前 选中 的 单 选 按钮 在 单 选 按钮 组 
中 的 位 置 。 

09 肌 在“ 布局， 使 用 ”区 域 设 置 单 选 按钮 组 中 的 各 个 单 选 按钮 的 分 隔 方式 。 本 例 选 
择 “ 表 格 ”。 此 时 的 对 话 框 如 图 9-16 所 示 。 

插入 的 单 选 按钮 组 的 各 个 单 选 按钮 是 上 下 排列 的 ， 用 户 可 以 通过 <br> 标记 分 开 ， 也 
可 以 选择 通过 表格 的 单元 格 来 界定 。 

10 肌 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 并 在 页 面 中 插入 单 选 按钮 组 ， 如 图 9-17 所 示 。 


计算 机 的 组 成 结构 为 ; 


图 9-17 插入 的 单 选 授 钮 组 


11. 选中 单 选 按 钮 组 ， 在 属性 面板 中 可 以 设置 各 个 单 选 按钮 初始 时 是 否 选 中 。 

12 月 执行 “插入 ”/“ 表 单 ”/“ 复 选 枉 ” 沫 单 命 令 ， 或 单 击 “ 表 单 ” 搬 入 面板 中 的 
d 即 可 向 表单 中 添加 一 个 复 选 按钮 ， 然 后 在 其 后 输入 “Photoshop” 

13 上 月 重复 步骤 (12) ， 再 插入 三 个 复 选 框 ， 如 图 9-18 所 示 。 

14 a en 
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下 面 哪些 软件 是 Adobe 公 司 的 产品 ; 


Photoshop Dreamweaver FrontPage Flash 


图 9-18 插入 的 复 选 框 效果 


© “ 复 选 框 名 称 ”: 用 于 设置 复 选 框 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
注意 : 与 单 选 按 钮 不 同 ， 由 于 每 一 个 复 选 框 都 是 独立 的 ， 因 此 应 为 每 个 复 选 框 设置 唯一 的 名 称 。 
e  “ 选 定 值 ”: 用 于 设置 该 复 选 框 被 选中 时 的 值 ， 这 个 值 将 会 随 表单 提交 。 
15 文档 创建 完毕 , 保存 文档 。 按 下 快捷 键 F12 即 可 在 浏览 器 中 预览 整个 页 面 的 效果 ， 
如 图 9-19 所 示 。 


AdobePhotoshog — - 
Adobe Draesmwegeer V? 
Ld 


L&dobe Dra 
ipism n FAdobeP eR, — |Adnbe Fireworks 


WUtHE— UROREERNSPRA. — [Microsoft FrontPage IB 
下 面 哪些 软件 是 Adabe 公 司 的 产品 ， 
Photezhep Dreamweaver Fronti'age 
YEMUUE) HB EET 03, 


A. i3Wes. iei edo fs ies 
B. Ap ESO gn p Rein 

c. XX ESE 

D. At PEEDES ERAT ($- 


图 9-19 预览 页 面 效 果 


[L]o. 1.6 按钮 


按钮 对 于 HTML 表 单 来 说 ， 是 必 不 可 少 的 ， 表 单 中 的 按钮 对 象 是 用 于 触发 服务 器 端 脚本 
处 理 程序 的 工具 。 只 有 单 击 了 “提交 ”按钮 ， 放 置 在 表单 中 的 所 有 表单 对 象 及 表单 才 可 以 
提交 到 服务 器 ， 从 而 在 客户 端 与 服务 右 问 之 则 产生 交互 作用 。 

下 和 面 通过 一 个 简单 实例 演示 在 文档 中 插入 按钮 的 具体 操作 。 

01. 继续 上 例 。 执 行 “ 插 入 ”/“ 表 单 ”/“ 按 钮 ”菜单 命令 ， 或 单 击 “ 表 单 ” 插 入 
面板 的 按钮 图 标 马 ， 在 表单 中 插入 两 个 按钮 。 

02 选中 第 一 个 按钮 ， 在 属性 面板 的 “按钮 名 称 ” 文 本 框 中 输入 按钮 的 名 称 ， 该 名 
称 可 以 被 脚本 或 程序 所 引用 ， 须 唯一 。 本 例 输 入 submit。 

03. 在 “ 值 ” 文 本 框 中 设置 按钮 的 标识 ， 该 标识 将 显示 在 按钮 上 。 本 例 使 用 默认 设 
置 “ 提 交 ”。 

04 月 在 “动作 ” 单 选 按钮 组 中 选中 “提交 表单 ”。 

HTML 提 供 了 三 种 基本 类 型 的 按钮 : 提交 、 重 置 、 无 。 其 中 ，“ 提 区” 按钮 会 使 用 POST 
方法 将 表单 提交 给 指定 的 动作 进一步 处 理 ， 通 常 是 服务 器 端 程序 的 URL 或 者 一 个 mailto 地 
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址 ， “ 重 填 ”按钮 会 清除 表单 中 所 有 的 域 ， 以 便 重新 输入 表单 数据 ，“ 无 ”按钮 通常 用 于 
执行 一 些 脚 本 操作 。 

05 “类 ”用 于 设置 应 用 于 按钮 上 文字 的 CSS 样 式 。 本 例 使 用 默认 设置 。 

06» 同 理 ， 在 属性 面板 中 设置 第 二 个 按钮 的 名 称 为 reset; “ 值 ”为 “ 重 填 ”; “ 动 
作 ” 为 “ 重 设 表单 ”。 

07) 保存 文档 。 按 下 快捷 键 F12 在 浏览 器 中 预览 整个 页 面 。 效 果 如 图 9-20 所 示 。 


TEES PEE Ad bez. 


Photoshop hein aver 
VrBEU B eiit o. 

A. VSWoER. foie Eni bes 

B. AKPF A SUSBUT A £8 

C. xs IBE 

D. 系统 软件 和 应 用 软件 


ga 


Abs. [Mess — giico 


图 9-20 ”插入 的 按钮 效果 


[L]o. 1.7 图 像 域 


在 表单 中 ,通常 使 用 “提交 ”按钮 来 近 交 表单 。 事实 上 ,， “图 像 域 ”可 以 倚 代 “所 区” 
按钮 来 执行 将 表单 数据 提交 给 服务 器 六 程 序 的 功能 。 而 且 使 用 图 像 域 可 以 使 文档 更 为 闫 
观 。 

下 面 通过 一 个 简单 实例 演示 在 文档 中 插入 图 像 域 的 具体 操作 ， 以 及 利用 图 标 代 蔡 提 交 
按钮 的 技术 。 

01. 狐 建 一 个 HTML 文档 。 执 行 “插入 ”/“ 表 单 ”/“ 和 表单 ” 沫 单 命 令 ， 或 者 单 击 “ 表 
单 ” 面 板 上 的 日 按钮 ， 在 页 面 中 插入 一 张 表单 。 
02 卓 将 光标 定位 在 表单 内 ， 执 行 “ 插 入 ”/“ 表 格 ” 蘑 单 命令 插入 一 个 三 行 两 列 的 表 


格 。 


03. 在 表格 第 一 行 一 列 中 输入 文本 “Name: ”， 然 后 在 第 一 行 第 二 列 的 单元 格 中 插 
入 一 个 文本 域 ， 并 在 属性 面板 中 设置 其 闪 型 为 “单行 ”。 

04. 同 理 ， 在 表格 的 第 二 行 插 入 文本 “Tel: ”和 文本 域 。 

05 用 选中 表格 第 三 行 的 两 个 单元 格 ， 执 行 “ 修 改 ”/“ 表 格 ”/“ 合 并 单元 格 ” 命 令 ， 
将 选中 的 单元 格 合并 为 一 个 单元 格 。 

06 9 将 光标 定位 于 表格 第 三 行 的 单元 格 内 ， 执 行 “插入 ”/“ 表 和 持 ”/“ 图 像 域 ” 采 
单 命令 ， 或 单 击 “ 表 单 ” 插 入 面板 上 的 图 像 域 图 标 时 。 

07 生 在 弹出 的 “选择 图 像 源 ” 对 话 框 中 选择 一 个 需要 的 图 像 文件 , 然后 蛙 击 “确定 ”。 

089 你 存 文档 ， 并 按 F12 键 预 帘 页 面 。 用 户 将 肥 现 单 击 图 像 后 负面 没有 变化 ， 并 没有 


提交 表格 。 
09 朋 单 击 文档 窗口 上 的 按钮 鲁 辐 图标， 切换 到 代码 和 设计 视图 。 在 “设计 ”视图 中 
单 击 图 像 域 ，“ 代 码 ” 视 图 中 相应 的 代码 变 为 黑色 突出 显示 。 


10. 在 图 像 域 代 码 末 尾 加 上 “value=Submit”， 这 时 图 像 域 代码 成 为 : 《input 
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name= imageField” type= image" src-^mail.gif/ width= 23”height= 16”border= 0” 
value= Submit >。 


11 上 在 “设计 ”视图 中 选中 图 像 域 ， 在 对 应 的 属性 面板 中 进一步 设置 图 像 域 的 属性 。 


e “图 像 区 域 ”: 用 于 设置 图 像 域 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
e — “ 源 文件 ”: 用 于 设置 图 像 的 URL 地 址 。 

@ — "ux". 用 于 选择 图 像 在 文档 中 的 对 齐 方式 。 

@ “替换 ”: 用 于 设置 图 像 的 替换 文字 ， 当 浏览 器 不 

显示 图 像 时 ， 会 用 输入 的 文字 替换 图 像 。 E rii 
e “编辑 图 像 ”: 启动 默认 的 图 像 编辑 器 ， 并 打开 该 | | 
图 像 文件 进行 编辑 。 


12 和 保存 文档 。 人 至 此 ， 文 档 创 建 完毕 。 可 以 按 下 快捷 
键 F12 在 浏览 右 中 了 预 归 整 个 页 耐 ， 如 图 9-21 所 示 。 当 单 击 图 
像 时 就 会 跳 转 到 表单 处 理 页 面 。 图 9-21 ”实例 效果 


[L]o. 1.8 隐藏 域 


将 信息 从 表单 传送 到 服务 器 处 理 时 ， 编 程 者 常常 需要 发 送 一 些 不 应 该 访问 者 看 到 的 数 
据 ， 例 如 ， 服 务 器 端 脚本 程序 需要 的 变量 。 此 时 ， 隐 藏 域 对 于 编程 者 而 言 极其 有 用 。 
“隐藏 域 ” 是 一 种 在 浏览 器 上 不 显示 的 表单 对 象 ， 利 用 “隐藏 域 ”可 以 实现 浏览 器 同 
服务 器 在 后 台 隐 藏 地 交换 信息 。“ 隐 藏 域 ” 可 以 为 表单 处 
理 程序 提供 一 些 有 用 的 参数 , 而 这 些 参数 是 用 户 不 关心 的 ， | 二 untitled4t. (CD C) D 
不 必 在 浏览 器 中 显示 。 人 
在 文档 中 插入 “隐藏 域 ”应 执行 以 下 步 又; || Buscxertart 
CD 执行 “插入 ”/“ 表 单 ”/“ 表 单 ” 命 令 , 或 者 单 ”| | 
击 插入 栏 中 表单 面板 的 四 按钮 ， 添 加 表单 。 
(20 将 光标 置 于 表单 中 ， 执 行 “ 揪 入 ”/“ 表 单 ”/ 
“隐藏 域 ” 沫 单 命令 ， 或 单 击 “ 表 单 ” 插 入 面板 上 的 隐藏 [ifermiformi? p> 2008 — e] 
域 图 标 蝶 插入 隐藏 域 ， 完 成 后 设计 视图 插入 一 个 标记 ， 如 
图 9-22 所 示 。 图 9-22 插入 隐藏 域 的 效果 
(3) 在 属性 设置 面板 中 设置 隐藏 域 的 参数 值 。 
e “隐藏 区 域 ”: 用 于 设置 隐藏 域 的 名 称 。 该 名 称 可 以 被 脚本 或 程序 所 引用 。 
e “ 值 ”: 用 于 设置 隐藏 域 的 参数 值 。 该 值 将 在 提交 表单 时 传递 给 服务 器 。 


在 Dreamweaver CS5 中 ，Adobe 预制 了 一 系列 表单 验证 构件 validation widgets) , 
例如 ，Spry 验证 文本 域 、Spry 验证 文本 区 域 、Spry Je ub. Spry 验证 确认 、Spry 验证 
选择 、Spry 验证 复 选 框 和 Spry 验证 单 选 按钮 组 等 ， 可 以 帮助 用 户 更 加 轻松 快捷 地 验证 表 
HS. Tf AJAX 页 面 。 
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Adobe 公 司 的 AJAX 框 架 Spry 能 与 Dreamweaver 无 颖 地 整合 ， 设 计 的 宗旨 就 是 标记 尽量 简 
单 ，Javascript 的 使 用 尽量 少 ， 直 接 用 拖拉 的 方式 完成 程序 代码 的 编写 。 

下 和 面 通过 一 个 人 简单 实例 介绍 Spry 表单 验证 构件 的 使 用 方法 。 

01 新 建 一 个 HTML 文档 ， 并 插入 一 张 表 早 。 

02 将 光标 置 于 表单 中 ， 输 入 文本 “邮箱 : ”之 后 ， 单 击 表 早 面板 上 的 “Spry 验证 
文本 域 ” 图 标 ， 插 入 相应 的 构件 。 

03 选中 该 表单 元 素 ， 在 属性 面板 中 的 “类 型 ”下 拉 列 表 中 为 验证 文本 域 构件 指定 
验证 类 型 。 本 例 选 择 “ 电 子 邮 件 地 址 ”。 

Spry 验证 文本 域 与 文本 域 相似 ， 不 同 的 是 ， 网 页 设计 者 不 需要 为 Spry 验证 文本 域 编 
写 验 证 代码 ， 只 要 在 属性 和 面板 中 设置 好 其 类 型 、 格 式 、 预 筑 状 态 和 验证 的 事件 ， 即 可 目 动 
验证 用 户 输 入 的 数据 是 否 合 法 。 

大 多 数 验 证 类 型 都 会 要 求 输入 的 内 容 采 用 标准 格式 。 例 如 ， 如 果 对 Spry 文本 域 应 用 
整数 验证 类 型 ， 则 在 该 文本 域 中 只 能 输入 整数 ， 否 则 将 无 法 通过 验证 。 

04 上 在 “预览 状态 ”下 拉 列 表 中 选择 表单 中 构件 的 显示 状态 。 本 例 选 择 “ 必 填 ”。 

05 在 “验证 于 ”后 面 的 复 选 框 中 指定 验证 文本 域 的 


时 机 ， 例 如 当 访 问 者 在 构件 外 部 单 击 时 、 键 入 内 容 时 或 党 oo | 
试 提交 表单 时 。 可 以 选择 所 有 的 选项 ， 也 可 以 一 个 都 不 选 。 UNE —  Itiidcmmas Mi 
其 中 , Hm. du E 


THEE. EXER OLOHTWK 二 足球 OCDE ub 


@  OnBlur: 当 用 户 在 文本 域 的 外 部 单 击 时 验证 。 Uds 
€  OnChange: 当 用 户 更 改 文本 域 中 的 文本 时 验证 。 | 
€  OnSubmit: 当 用 户 壬 试 提交 表单 时 验证 。 | 
06 按照 上 面 的 方法 插入 spry 验证 复 选 框 构件 、 0 
spry 验证 文本 区 域 构件 和 spry 验证 选择 构件 ， 以 及 两 个 
按钮 ， 此 时 的 页 和 面 布局 如 图 9-23 Pra « 图 9-23 页 面 布局 
07 选中 spry 验证 选择 构件 ， 在 属性 面板 中 设置 名 称 为 “degree”， 不 允许 空 信 。 
Spry 验证 选择 构件 与 列表 / 环 单 相 似 ， 是 一 个 下 拉 玉 单 。 其 中 ，“ 焦 点 状态 ”表示 当 
用 户 单 击 该 选择 构件 时 的 状态 。 
为 Spry 选择 构件 添加 有 琳 单 项 的 有 关 操 作 与 列表 /有 亲 早 项 的 操作 类 似 ， 读 者 可 以 参见 本 
章 9. 1. 3 节 相 关 的 介绍 。 
默认 情况 下 ， 用 Dreamweaver 插入 的 所 有 验证 选择 构件 都 要 求 用 户 在 将 构件 发 布 到 
Web 页 之 前 ， 选 择 具有 相关 值 的 菜单 项 。 但 是 ， 也 可 以 禁用 此 选项 ， 即 取消 选择 “不 允许 
宇 全 ”选项 。 
如 果 选 中 了 “无 效 值 ”， 且 在 其 后 的 文本 框 中 指定 了 无 效 值 ， 则 当 用 户 选 择 与 该 值 相 
天 的 菜单 项 时 ， 该 值 将 注册 为 无 效 。 例 如 ， 如 果 指 定 -1 是 无 效 值 ， 并 将 该 值 赋 给 某 个 选 
项 标签 ， 则 当 用 户 选 择 该 来 单项 时 ， 访 构件 将 返回 一 条 错误 消息 。 
08. 选中 spry 验证 复 选 框 构件 ， 在 属性 面板 中 指定 选择 范围 ， 选 择 “ 实 施 范 围 ” 
并 输入 希望 用 户 选 择 的 最 小 复 选 杠 数 或 /和 最 大 复 选 框 数 。 
Spry 验证 复 选 框 构件 是 HTML 表单 中 的 一 个 或 一 组 复 选 枉 。 例 如 本 例 中 ， 表 单 要 求 
用 户 人 至 少 选 择 一 项 ， 但 不 能 多 于 两 项 。 如 果 用 户 没 有 进行 选择 ， 或 选择 的 项 多 于 两 项 ， 则 
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该 构件 会 自动 返回 一 条 消息 ， 声 明 不 符合 最 小 选择 数 或 最 大 选择 数 要 求 。 

“实施 范围 ”用 于 设置 构件 在 “设计 ”视图 中 的 显示 状态 。 

09】 选中 spry 验证 文本 区 域 构件 ， 在 属性 面板 中 设置 其 “最 小 字符 数 ” 为 5，“ 最 
大 字符 数 ”为 50;， 无 计数 器 ， 禁 止 额外 字符 ，“ 提 示 ” 文 本 为 “欢迎 光临 ! ”。 预 览 状态 
为 “有 效 ”。 

Spry 验证 文本 区 域 构件 是 一 个 文本 区 域 ， 该 区 域 在 用 户 输入 文本 时 显示 文本 的 状态 
有 效 或 无 效 。 如 果 文 本 区 域 是 必 填 域 , 而 用 户 没有 输入 任何 文本 , 该 构件 将 返回 一 条 消息 ， 
声明 必须 输入 值 。 

“最 小 字符 数 ” 和 “最 大 字符 数 ” 用 于 限制 验证 文本 区 域 能 输入 的 字符 的 下 限 和 上 限 。 

“计数 器 ”用 于 显示 用 户 在 文本 区 域 中 已 经 输入 了 多 少 字符 或 者 还 剩 多 少 字符 。 默 认 
情况 下 ,添加 的 字符 计数 器 会 出 现在 构件 右 下 角 。“ 字 符 计数 ”用 于 计算 已 输入 的 字符 数 ， 
“其 余 字 符 ” 用 于 计算 还 可 以 输入 的 字符 数 。 
注意 :只 有 设置 了 “最 大 字符 数 ”， 才 能 使 用 “其 余 字 符 ” 计 数 器 。 

“禁止 额外 字符 ” 复 选 框 与 “最 大 字符 数 ” 类似， 用 于 防止 用 户 在 验证 文本 区 域 构件 
中 输入 的 文本 超过 所 允许 的 最 大 字符 数 。 

“提示 ”用 于 向 文本 区 域 中 添加 提示 信息 ， 以 便 让 用 户 知道 应 当 在 文本 区 域 中 输入 哪 
种 信息 。 当 用 户 在 浏览 器 中 加 载 页 面 时 ， 文 本 区 域 中 将 显示 添加 的 提示 文本 。 

接 下 来 在 表单 中 添加 Spry 验证 密码 和 Spry 验证 确认 构件 ， 分 别 用 于 验证 用 于 输入 的 
密码 是 否 正 确 ， 以 及 两 次 输入 的 密码 是 否 一 致 。 

10 在 “邮箱 ”下 一 行 输入 “登录 密码 ，”， 然 后 插入 一 个 Spry 验证 密码 控件 。 

11 选中 该 控件 ， 在 如 图 9-24 所 示 的 属性 面板 上 设置 密码 中 字符 、 字 母 、 数 字 、 大 
写字 母 以 及 特殊 字符 的 个 数 范围 。 


Ptl 
6) 


E Spry 密码 必 卦 “最 小 字符 数 预览 状态 | 初始 v| v4 
sprypasswordl ROCERHN 验证 时 间 [ ] onplur [ ] onChange onSubmi t 
自 定义 此 构件 景 小 字母 数 景 小 数字 数 景 小 大 写字 母 数 景 小 特殊 宇 符 数 
最 大 字母 数 最 大 数字 数 最 太太 与 字母 数 最 大 特殊 字符 数 


图 9-24 ”设置 Spry 验 证 密码 控件 的 属性 


行 上 述 任 一 选项 保留 为 衬 ， 构 件 将 不 验证 用 户 输入 的 密码 是 售 满 足 访 条件。 例如， 如 
末 最 小 /最 大 数 子 数 选项 保留 为 宇 ， 构 件 将 不 俘 找 密码 字符 串 中 的 数 子 。 
12. 为 起 一 行 ， 输入 “确认 登录 密码 : ”， 并 在 其 右 侧 插入 一 个 Spry 验证 确认 控件 。 
选中 该 控 件 ， 在 如 图 9-25 所 示 的 属性 面板 上 设 秆 该 控件 的 验证 参照 对 象 。 


SU. — — n——— (€ —————— vá€——— náá————— À— WM 
® 


DM Spry 确认 38 Tue | 初始 | d 
^w spryconfirml JauESREDHÉR “passwordl” 在 表单 “fc v| 验证 时 间 [ ] onBlur 上 | onChange onSubmi t e 
自 定 必 此 构件 


图 9-25 ”设置 Spry 验 证 确认 控件 的 属性 


分 配 了 唯一 ID 的 所 有 文本 域 都 显示 为 “验证 参照 对 象 ” 下 拉 列 表 中 的 选项 。 如 果 用 
户 在 该 控件 中 键入 的 密码 与 他 们 之 前 指定 的 密 但 人 不一致， 构件 将 返回 错误 消 县 。 
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在 这 一 步 中 ， 如 果 验 证 参照 对 象 选择 验证 文本 域 构件 ， 则 可 以 验证 电子 邮件 地 址 。 
13 和 再 男 起 一 行 ， 输 入 “邮件 列表 视图 : ”， 然 后 插入 一 个 Spry 验 证 单 选 按钮 组 控 
件 。 在 弹出 的 对 话 框 中 设置 单 选拔 钮 组 的 慰 签 和 信 ， 如 图 9-26 所 未 。 


prr 
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图 9-26 ”设置 Spry 验 证 单 选 按 钮 组 


14 单 击 “人 确定 ”按钮 关 财 对 话 框 之 后 ， 在 属性 面板 上 指定 验证 单 选 授 钮 组 的 容 值 
或 无 效 值 。 

在 单 选 按钮 的 属性 面板 中 为 单 选 按 钮 分 配 了 一 个 选 定 值 之 后 ， 奋 要 创建 具有 和 衬 值 的 单 
Jun, 则 单 击 验证 单 选 投 钮 组 构件 的 复 色 选项 卡 之 后 , 在 “ 选 定 值 ” 文本 框 中 键入 none. 
奋 要 创建 具有 无 效 值 的 单 选 投 钮 ， 则 在 “ 选 定 值 ”文本 框 中 键入 invalid. 

当 用 户 选 择 的 单 选 按钮 与 none 或 invalid 关联 时 ， 指 定 的 值 也 相应 地 注册 为 none 
或 invalid。 如 采用 户 选 择 具 有 衬 值 的 单 选 按钮 ， 则 浏览 器 将 返回 “请 进行 选择 ”的 错误 
消 县 。 如 采用 户 选 择 具 有 无 效 值 的 单 选 按钮 ， 则 浏览 恬 将 返回 “请 选择 一 个 有 效 什 ”的 氏 
VH e 
注意 : 单 选 按 钮 本 身 和 单 选 按钮 组 构件 都 必须 分 配 有 none Bk invalid 值 ， 错 误 消 上 息 才 能 正确 显示 。 

15. 页面 布局 如 图 9-27 所 示 。 保 存 文档 ， 按 Fl12 键 在 浏览 器 中 预览 验证 效 末 。 


教育 程度 ， AME 四 
兴趣 爱好 ， Cd D CD 足球 口 滑冰 口 登山 口 其 他 


图 9-27 ”页面 效果 


一 个 完整 的 表单 应 该 有 两 个 重要 组 成 部 分 : 一 是 含有 表单 和 表单 元 素 的 网 页 文档 ， 为 
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一 个 是 用 于 处 理 用 户 输 入 的 信息 的 服务 器 端 应 用 程序 或 客户 端 脚 本 。 因 此 ， 若 要 在 网 页 中 
实现 信息 的 真正 交互 ， 仅 在 文档 中 创建 表单 及 表单 对 象 是 不 够 的 ， 还 必须 使 用 脚本 或 应 用 
程序 来 处 理 相 应 的 信息 。 通 常 ， 这 些 脚本 或 应 用 程序 由 《form> 标 记 中 的 action 属 性 指定 。 
如 果 需 要 完成 的 操作 比较 人 简单， 可 以 放 在 客户 问 进 行 。 

下 面 通过 一 个 简单 的 例子 演示 人 处理 表单 的 一 般 方法 。 

501. 新 建 一 个 HTML 文件 , 在 页 面 中 添加 一 张 表单 ,并 在 属性 面板 上 设置 其 ID 为 f1, 


动作 为 mailto:webmaster@123. com。 然 后 在 表单 中 插入 一 张 表格 , 并 设置 表格 的 痛 景 闫 色 ， 
输入 相关 文本 ， 最 终 的 效果 如 图 9-28 所 示 。 

mam eee 

TU eR RN MM MM MMC Inu 3H 


m— DUTIES 其 他 已 登记 的 信息 


— BAN LIO - be Eu DET. rem cecus s PN M 
bay? CLaELe? Gur? C4 Gran. STTLEL 2 (k]m» a m TÉ: Ei 


图 9-28 ”设置 表格 、 文 本 
和 02 将 光标 放置 于 “密码 ”后 面 的 单元 格 中 。 使 用 “插入 ”/“ 表 单 对 象 ”/“ 文 本 
域 ” 命 令 , 或 者 直接 单 击 “ 插 入 ” 栏 中 “表单 ”面板 中 的 山 按 钮 ， 在 表格 中 插入 文本 域 对 
象 。 如 图 9-29 所 示 。 


图 9-29 添加 文本 域 对 象 


03 选中 文本 域 对 象 , 在 属性 面板 中 设置 文本 域 的 名 称 为 password, 字符 宽度 为 25， 
最 大 字符 数 为 14， 类 型 为 “密码 ”。 

和 04 和 将 光标 放置 于 含有 “出 生日 期 ”文本 单元 格 的 后 一 个 单元 格 中 ， 单 击 “ 插 入 ” 
栏 中 “表单 ” 面板 中 的 吴 按钮 ， 再 添加 一 个 文本 域 对 象 ,在 文本 域 对 象 后 键入 文本 “年 ”， 
设置 此 文本 域 对 象 的 名 称 为 year， 字 符 宽度 为 5， 最 大 字符 数 为 4， 类 型 为 “单行 ”， 初 
始 值 为 20。 

和 05 和 按照 上 一 步 的 方法 添加 文本 域 对 象 “day” 和 “idcard”。 

206 将 光标 放置 于 “个 人 说 明 ” 单 元 格 后 一 单元 格 ， 单 击 呈 按钮 ， 添 加 多 行文 本 域 
对 象 “text”， 设 置 其 起 始 值 为 “欢迎 光临 ”。 此 时 的 设计 视图 如 图 9-30 所 示 。 


欢 节 光临 ! 


个 人 说 明 : 


图 9-30 ”文本 域 对 象 添加 效果 疼 
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07 旧 将 光标 放置 于 “性 别 ” 单 元 格 后 一 个 单元 格 ， 单 击 “ 捅 入 ” 栏 “ 表 单 ” 面 板 中 
的 图 按 钮 ， 此 时 会 添加 一 个 单 选 框 ， 再 此 单 选 框 后 键入 文本 “ 羽 ”。 

08 肯 选中 该 单 选 按 钮 ， 在 属性 面板 中 为 靳 添加 的 单 选 杠 对象 命名 “gender ”， 设 置 
选 定 值 为 0， 初始 状态 为 “未 选中 ”。 

09 上 用 单 击 国 按 钮 ， 添 加 同名 为 “gender ”的 单 选 框 ， 改 变 选 定 值 为 1， 并 在 单 选 框 后 
键入 文本 “ 女 ”。 此 时 文档 的 效果 如 图 9-31 所 示 。 


ET | | 
NC | | 


图 9-31 添加 单 选 杠 


10 将 光标 放置 于 文本 “姓名 ， 联 系 方式 ”前 面 ， 单 击 “ 表 单 ” 面 板 中 的 图 按钮 ， 
添加 一 个 复 选 框 ， 设 置 复 选 框 名 称 为 yes2， 初 始 状 态 为 “已 勾 选 ”。 

11. 按照 上 面 的 方法 在 文本 “其 他 已 登记 的 信息 ”前 面 添加 一 个 复 选 框 ， 此 时 的 效 
果 如 图 9-32 所 示 。 


我 愿意 其 他 人 可 以 搜索 到 我 的 如 下 资料 : 坟 姓名 ， 联 系 方式 其 他 已 登记 的 信息 


图 9-32 ”添加 复 选 框 


12 将 光标 放置 于 文本 “年 ”之 后 ， 单 击 “ 表 单 ” 面 板 中 的 转 按 钮 ， 添加 一 个 下 拉 
琳 单 对 象 。 选 中 下 拉 菜 单 对 象 ， 单 击 属 性 面板 中 的 “列表 值 ”按钮 ， 弹 出 一 个 对 话 框 ， 在 
其 中 设置 列表 值 。 此 处 设置 项 目标 签 与 值 都 是 从 01 一 12， 如 图 9-33 所 示 。 

13 骨 在 属性 面板 中 为 下 拉 荣 单 对 象 命名 “month”， 并 选取 初始 化 时 值 为 01。 

14 用 将 光标 设置 于 “教育 水 平 ” 单 元 格 后 一 个 单元 格 ， 单 击 表单 面板 中 的 图 按钮 ， 
添加 一 个 列表 对 象 。 

15 月 选 定 菜 单 对 象 后 ， 单 击 属性 面板 中 的 “列表 值 ” 按钮 ， 为 列表 设置 列表 值 ， 具 
体 设 置 如 图 9-34 所 示 。 


图 9-33 ”设置 列表 值 图 9-34 ”设置 列表 值 


16 在 属性 面板 中 为 列表 命名 “degree”， 设置 高 度 3。 完 成 上 面 的 步骤 后 ， 此 时 的 
页 面 效 果 如 图 9-35 所 示 。 


教育 水 平 : TE e 
初中 


图 9-35 xn RSS AS 


171 


Dreamweaver CS5 中 文 版 标准 实例 教程 


17 月 将 光标 置 于 “个 人 风采 ”单元 格 的 下 一 个 单元 格 ， 单 击 表单 面板 中 的 口 按 钮 ， 
添加 一 个 文本 域 对 象 。 

18. 选中 文本 域 对 象 ， 在 属性 面板 中 为 其 命名 “file”， 选 取 字 人 符 宽 上 度 20， 最 大 字 
符 数 50。 此 时 的 页 面 效 果 如 图 9-36 所 示 。 


2 NN [03 


图 9-36 ”添加 文本 域 
19 将 光标 放置 于 最 后 一 个 单元 格 ， 单 击 表单 面板 中 的 加 按钮 添加 一 个 按钮 对 象 。 
20 选中 按钮 对 象 ， 在 属性 面板 中 为 其 命名 “submit3”， 标 签 为 “确定 ”， 动 作为 
“提交 表单 ”。 同 理 ， 添 加 “ 重 填 ”按钮 。 
至 此 基本 完成 ， 可 以 保存 文档 并 按 F12 键 在 浏览 器 中 浏览 测试 。 如 图 9-37 所 示 。 


(QRARARM-ER em 0909 
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有 效 证 件 号 码 ; | 
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图 9-37 ”添加 文本 域 


通过 测试 会 发 现 ， 在 表单 中 没有 项 任何 数据 ， 或 填 的 数据 无 效 时 ， 单 击 “ 确 定 ” 按 钮 
后 仍然 会 提交 表单 。 这 是 网 页 设计 者 所 不 愿 看 到 的 , 为 了 解决 这 个 问题 , 可 以 用 JavaScript 
脚本 语言 来 对 表单 各 对 象 的 值 进行 有 效 性 检查 。 具 体 步 又 如 下 : 
21 执行 “得 看 ”/“ 文 件 头 内 容 ” 命令 显示 文档 窗 HEISE. (Edd ANTH: "2$" 
面板 中 的 插入 脚本 图 标 受 ， 弹 出 “脚本 ”对 话 框 。 
22 “语言 ”选择 “JavaScript”,， 在 “内 容 ” 文 本 框 输入 以 下 JavaScript 程序 段 : 


function checkForm() { 


if (document. f1. password. value--^^) { 
alert(“ 密码 不 能 为 容 !“); 


return false: 


return true; 
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所 示 的 “标签 编辑 器 ”对 话 框 。 


标签 信息 


| LL 


图 9-38 “标签 编辑 ”对 话 框 


24 上 月 单 击 “ 事 件 ” 前 面 的 加 号 展开 事件 ， 选 中 onClick， 这 时 标签 编辑 对 话 框 右边 将 
显示 Input-onClick 文本 框 。 

25 4r Input-onClick 文本 框 中 输入 事件 处 理 代 人 码 “return checkForm O ”后 单 击 
“人 确定 ”按钮 关闭 对 话 框 。 

26 保存 文档 ， 在 浏览 器 中 预 归 页 面 效 末 ， 公 此 示例 全 部 完成 。 

本 例 网 页 的 最 终 功 能 只 检验 输入 的 密码 ， 最 多 可 以 输入 14 个 字符 当 和 密码 为 容 值 时 ， 
单 击 “人 确定 ”按钮 会 弹出 相应 的 错误 提示 对 话 框 ， 并 取消 提交 表单 。 

上 一 节 中 我 们 介绍 过 ， Spry 表 单 验证 构件 不 需要 编码 ， 残 可 以 对 部 分 表单 对 象 的 值 
进行 有 效 性 检查 。 在 本 例 中 ， 可 以 用 Spry 验 证 文本 域 替换 文本 域 ， 用 Spry 验 证 文本 区 域 替 
换 多 行文 本 域 ， 用 Spry 验 证 复 选 框 蔡 换 复 选 框 ， 则 当 密 码 为 空 值 或 输入 的 身份 证 号 位 数 不 
正确 ， 或 个 人 说 明和 字符 数 不 合 要 求 ， 或 选择 的 复 选 框 个 数 过 多 或 过 少时 ， 单 击 “ 提 交 ” 按 
钮 会 厦 出 相应 的 错误 提示 对 话 框 ， 并 取消 表单 提交 。 有 兴趣 的 谈 者 可 以 仿照 本 例 的 步骤 使 


用 Spry 验 证 构件 制作 一 个 页 面 进行 测试 。 


本 例 制作 的 留言 短 页 面 是 导航 项 目 图 片 “ 语 过 谎 情 ”的 链接 目标 。 由 于 其 页 面 布 局 与 

主页 相同 ， 所 以 本 例 使 用 模板 制作 留言 每 。 步 又 如 下 : 

0 角 打 开 已 制作 的 个 人 主页 index. html, 选中 正文 部 分 的 表格 ( 即 页 面 右 侧 的 表格 ) 。 

0299 打开 “插入 ”浮动 面板 ， 并 切换 到 “管用 ”面板 。 单 击 “ 第 用 ”面板 上 的 可 编 
和 辑 区 域 网 标 按钮 。 

03. 在 弹出 的 “新 建 可 编辑 区 域 ” 对 话 框 中 ， 将 可 编辑 区 域 命 名 为 content， 然 后 单 
击 “ 确 定 ” 按 钮 关闭 对 话 框 。 即 可 将 选中 表格 变 为 可 编辑 区 域 ， 如 网 9-39 所 示 。 

04 昌 执行 “文件 ”/“ 态 保存 为 模板 ”命令 ， 将 index. html 另 存 为 模板 。 

05 执 行 “ 文 件 ”/“ 资 源 ” 命 令 ， 打 开 “ 资 源 ” 面 板 。 单 击 “ 资 源 ” 和 面板 左 侧 的 模 
板 按 钮 图 ， 切 换 到 “模板 ”面板 。 
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06 在 模板 列表 中 单 击 另存 为 的 模板 index. dwt， 单 击 右键 ， 从 弹出 的 上 下 文 菜单 中 
选择 “从 模板 新 建 ” 命 令 ， 即 可 新 建 一 个 与 index. html 相 同 的 未 命名 文档 ， 但 只 有 命名 为 
content 的 区 域 可 以 编辑 。 

有 天 模板 的 介绍 将 在 本 书 第 12 章 进行 讲解 。 

07 几 删除 正文 区 域 第 二 行 至 第 四 行 的 内 容 ， 然 后 将 “欢迎 光临 我 的 小 屋 ”修改 为 “ 语 
BST . NGHE vau 9-40. 


一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 " T T TR 一 - ——À 
[k]'R à mex = 和 Labbe: (tr TD matimskameezadi daba) abl rR [M] fj C, am — Euh a 4 1E JI 


图 9-39 插入 可 编辑 区 域 图 9-40 修改 标题 文字 


08. 选中 第 二 行 至 第 四 行 的 单元 格 ， 在 属性 面板 上 单 击 “ 合 并 单元 格 ” 按 钮 ， 将 选 
中 的 单元 格 合并 为 一 行 ; 并 设置 单元 格 内 容 的 水 平 对 章 方式 为 “居中 对 齐 ”， 竺 特 对 章 方 
式 为 “顶端 ”。 

09 肯 将 光标 定位 在 单元 格 中 ， 单 击 “ 第 用 ”面板 上 的 “表单 ”页 签 ， 切 换 到 “表单 ” 
面板 。 然 后 单 击 表单 图 标 按钮 ， 在 单元 格 中 插入 一 个 表单 。 

10 在 表单 的 属性 和 面板 上 ， 设 置 表单 的 名 称 为 forml; 在 “动作 ”文本 框 中 输 
入 mailto:vivi@123. com; 在 “方法 ”下 拉 列 表 中 选择 “POST”; 在 “目标 ”下 拉 列 表 中 
选择 “ blank”。 

当 浏 览 者 单 击 表单 的 “提交 ”按钮 后 ， 该 表单 内 容 将 会 发 送 到 指定 的 邮箱 。 

11. 将 光标 放置 在 表单 中 ， 单 击 “ 和 常用 ”面板 上 的 表格 图 标 按钮 ， 在 弹出 的 对 话 杠 
中 设置 表格 的 行 数 为 5， 列 数 为 2， 表 格 宽度 为 500 像 际 ， 边 框 粗细 为 1 像素 。 单 击 “ 确 定 ” 
按钮 在 页 面 中 插入 一 个 5 行 2 列 的 表格 。 

12 在 属性 面板 中 将 插入 的 表格 的 边框 闫 色 设 置 为 #99CC00; 然后 选中 正文 区 域 的 大 
表格 , 在 属性 面板 上 将 “填充 ”和 “间距 ” 均 设 置 为 5; 边框 为 1 像素 ; 边框 h 闫 色 为 #99CC00。 
此 时 的 页 面 效果 如 图 9-41 所 示 。 

13 旨 在 第 一 行 的 前 四 行 单元 格 中 输入 文本 ， 例 如 : BEER. TEX. SUDO. Ede 

14 肯 将 光标 放置 在 第 一 行 第 二 列 的 单元 格 中 ， 单 击 “ 表 单 ” 面 板 中 的 Spry 验 证 文本 
域 图 标 按钮 中 ， 插 入 一 个 Spry 验 证 文本 域 。 

15 上 月 选中 Spry 验 证 文本 域 ， 在 其 属性 面板 上 设置 其 “了 最 小 字符 数 ” 为 2，“ 了 最 大 字符 
数 ” 为 12; “ 预 距 状态 ”为 “初始 ”。 其 他 选项 保留 默认 设置 。 此 时 的 页 面 如 图 9-42 所 示 。 

16， 将 光标 定位 在 第 二 行 第 二 列 的 单元 格 中 ， 单 击 “ 插 入 ” 栏 “ 表 单 ” 面 板 中 的 图 按 
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钮 ， 此 时 会 添加 一 个 单 选 枉 ， 再 此 单 选 框 后 键入 文本 “帅哥 ”。 

17 选中 该 单 选 按钮 ， 在 属性 面板 中 为 新 添加 的 单 选 框 对 象 命名 “gender , WE 
选 定 值 为 0， 初始 状态 为 “未 选中 ”。 

18. 再 次 单 击 加 按钮 ， 添 加 同名 为 “gender” 的 单 选 框 ， 改 变 选 定 值 为 1， 并 在 单 选 
框 后 键入 文本 “美眉 ”。 此 时 文档 的 效 来 如 图 9-43 所 示 。 


» 
(able Oro c atia tane: aditable? on ET 


图 9-41 插入 表格 
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图 9-42 ”添加 Spry 文 本 域 图 9-43 ”添加 单 选 杠 


19 在 “主题 类 别 ” 后 的 单元 格 中 插入 一 个 Spry 选 择 构 件 。 在 属性 面板 上 将 其 名 称 
设置 为 item; “预览 状态 ”为 “ 必 填 ”;， 其 他 选项 保留 默认 设置 。 

20. 在 页 而 上 单 击 插入 的 Spry 选 择 构 件 ， 在 属性 面板 上 设置 其 “类 型 ”为 “来 单 ”; 
然后 单 击 “列表 值 ” 按 钮 ， 在 弹出 的 对 话 框 中 编辑 该 选择 构件 的 各 个 选项 。 如 软件 、 文 学 、 
图 像 、 和 情感、 娱乐、 其 他 、 请 选择 一 个 类 别 。 

21 单 击 “ 确 定 ” 按 钮 关闭 “列表 值 ” 对 话 框 ， 在 属性 面板 的 “初始 时 选 定 ” 列 表 
框 中 选中 “请 选择 一 个 类 别 ”。 此 时 的 页 面 如 图 9-44 所 示 。 

22 在 “留言 ”后 的 单元 格 中 插入 一 个 Spry 验 证 文本 区 域 ， 并 在 属性 面板 上 设置 其 
名 称 为 message; “最 小 字符 数 ” 和 “最 大 字符 数 ” 分 别 为 6 和 300; “计数 器 ”为 “其 余 
字符 ”, 即 提示 浏览 者 还 可 以 输入 多 少 个 字符 ;“ 提 示 ” 为 “请 留 下 您 的 宝 贯 意见 或 建议 。”; 
“预览 状态 ”为 “有 效 ”; 其 他 选项 保留 默认 设置 。 此 时 的 页 面 如 图 9-45 所 示 。 
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和 23 月 选中 最 后 一 行 单元 格 , 单 击 属性 面板 上 的 合并 单元 格 按 钮 , 将 其 合并 为 一 个 单元 
格 ， 并 设置 单元 格 内 容 的 水 平 对 齐 方式 为 “居中 对 齐 ”。 然 后 在 其 中 插入 两 个 按钮 。 

和 24 和 选中 第 一 个 按钮 ， 在 属性 面板 上 设置 其 名 称 为 submit; 值 为 “提交 ”; 动作 为 
“提交 表单 ”。 选 中 第 二 个 投 钮 ， 在 属性 面板 上 设置 其 名 称 为 reset; fH7g "m". 动 
作为 “ 重 设 表单 ”。 
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图 9-45 ”添加 单 选 杠 
和 25 且 调整 表格 的 高 度 到 合适 的 位 置 。 然 后 保存 文档 ，Dreamweaver 将 弹出 一 个 “复制 


相关 文件 ”对 话 框 ， 担 示 用 户 页 面 上 的 对 象 需要 的 文 持 文 件 已 复制 到 本 地 站 点 ， 要 使 相应 
的 对 象 能 正 利 工作 ， 必 须 将 这 些 文 件 上 传 到 服务 亏 。 


Fd 


当 输 入 的 文本 有 效 ， 单 击 “ 提 区” 按钮 即 可 将 表单 数据 发 送 到 指定 的 邮箱 ， 且 Spry 构 
色 为 绿色 ; 否则 不 提交 表单 ， 显 示 
9-46 上 所 示 。 


26 单 击 “ 硝 定 ” 按 钮 ， 上 传 文 持 文件 。 然 后 按 下 Fl12 键 在 浏览 磺 中 预览 页 面 。 
TETTE S 


个 错误 提示 框 ， 并 显示 为 相应 的 闫 色 ， 如 图 
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图 9-46 页面 预览 效果 
由 于 本 例 设置 了 “其 余 字 符 
入 字符， 


”类 型 的 计数 器 ， 因 此， 如 果 在 “留言 ”文本 区 域 没有 输 
则 显示 为 300， 每 输入 一 个 字符 ， 


则 计数 需 误 递减 。 
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行为 是 Dreamweaver CS5 提 供 的 一 个 功能 强大 的 工 
具 ， 实 际 上 是 JavaScript 代 码 和 程序 库 ， 是 一 种 实现 页 面 
交互 控制 的 机 制 ， 它 可 以 完成 许多 复杂 的 JavaScript 代 码 ， 
极 大 地 扩展 了 网 页 设计 者 对 各 种 可 能 性 的 选择 范围 .通过 
行为 ， 任 何 网 页 设计 者 都 可 以 让 页 面 元 素 “ 动 ”起 来 ， 实 
现 强大 的 交互 性 与 控制 功能 , 而 所 有 这 些 操作 只 需要 通过 
简单 直观 的 设置 语句 ， 用户 不 需要 编写 任何 代码 ,甚至 不 
5 XY SET A JavaScript. AeJF] P 37S JavaScript, 46 
可 以 对 代码 进行 手工 修改 ， 使 之 更 符合 自己 的 需要 。 
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行为 管理 面板 
附加 行为 到 页 面 元 素 


Dreamweaver CS5 的 内 置 行为 


安装 第 三 方 行为 


实例 制作 之 动态 导航 图 像 
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10. 1; SESS SIME 


在 Dreamweaver 中 ,行为 是 事件 (Event) 和 动作 Caction) 的 组 合 , 是 客户 端 JavaScript 
代码 。 通 过 在 浏览 页 面 中 触发 事件 ， 从 而 发 生 茶 个 动作 ， 这 吏 是 行为 的 本 质 功能 。 

所 谓 事 件 ， 束 是 浏览 堪 啊 应 访问 者 的 操作 行为 ， 是 浏览 右 生 成 的 消 上 县， 指示 该 页 的 访 
问 者 执行 了 某 种 操作 。 例 如 ， 当 访问 者 将 鼠标 指针 移动 到 某 个 链接 上 时 ， 浏 览 右 为 该 链接 
生成 一 个 OnMouseOver 事件 。 


eonAbort: 当 用 户 终 止 浏览 右 对 一 幅 图 像 的 载 入 时 会 触发 该 事件 。 例 如 ， 在 图 像 下 载 

过 程 中 ， 用 户 单 击 浏览 器 的 “停止 ”按钮 时 ， 束 会 触发 该 事件 。 

@ onBlur: 当 指 定 的 元 素 不 再 是 用 户 交 互 行为 的 焦点 时 ， 触 友 访 事件 。 例 如， 光标 原 

停留 在 文本 框 中 ， 当 用 户 单 击 此 文本 框 之 外 的 对 象 时 ， 触 友 该 事件 。 

eonChange: 当 用 户 改 变 了 页 面 中 的 值 时 ， 和 触发 该 事件 。 

eonClick: 当 用 户 单 击 在 页 面 上 茶 一 特定 的 元 素 时 ， 触 发 该 事件 。 

eonDblClick: 当 用 户 双击 在 页 面 上 某 一 特定 的 元 素 ， 触 发 该 事件 。 

@onError: 当 浏 览 器 在 载 入 页 面 或 图 像 过 程 中 友 生 错误 时 ， 触 发 该 事件 。 

@ onFocus: 本 事件 与 onBlur 事件 正好 相反 ， 当 用 户 将 光标 定位 在 指定 的 焦点 时 ， 人 触 

发 该 事件 。 

@onKeyDown: 当 用 户 按 下 键盘 上 的 一 个 键 ， 无 论 是 否 释放 该 键 都 会 触发 该 事件 。 

@onKeyPress: 当 用 户 按 下 键盘 上 的 一 个 键 ， 然 后 释放 该 键 时 ， 触 有 该 事件 。 该 事件 

可 以 看 作 是 onKeyUp 和 onKeyDown 两 个 事件 的 组 合 。 

@onKeyUp: 当 用 户 按 下 键盘 上 的 一 个 键 ， 在 释放 该 键 时 ， 触 友 访 事件 。 

eonLoad: 当 一 幅 图 像 或 页 和 面 完成 载 和 之后， 触发 该 事件 。 

eonMouseDown: 当 用 户 按 下 鼠标 左 键 尚 未 释放 时 ， 人 触发 该 事件 。 

@onMouse0ver: 当 用 户 将 女 标 指针 移 开 指 定 元 素 的 光 围 时 ， 触 友 访 事件。 

eonMouseUp: 当 投下 的 鼠标 按钮 和 被 释放 时 ， 触 友 该 事件 。 

@onMove: 当 浏 览 窗口 或 框架 移动 时 ， 触 友 访 事件 。 

eonReadyStateChange: 当 指 定 的 状态 发 生 改 变 时 ， 和 触发 该 事件 。 可 能 的 元 素 状 态 包 

括 : 未 初始 化 (uninitialiazed) 、 载 入 (loading) 和 完成 Ccomplete) 。 

@ onReset: 当 一 个 表单 中 的 数据 被 重 置 时 ， 触 友 访 事件。 

eonScroll: 当 用 户 利 用 深 动 条 或 入 关键 上 下 深 动 显示 内 容 时 ， 触 发 该 事件 。 

@ onSelect: 当 用 户 从 文本 框 中 选取 文本 时 ， 触 友 访 事件 。 

@ onSubmit: 当 用 户 提 交 表 单 时 ， 触 友 该 事件 。 

@onUnload: 当 用 户 离 开 页 面 时 ， 触 发 该 事件 。 

该 者 要 注意 的 是 ， 不 同 的 页 面 元 素 定 义 了 不 同 的 事件 ， 例 如 ， 在 大 多 数 浏 览 右 中 ， 
OnMouse0ver 和 0nClick 是 与 链接 关联 的 事件 ， 而 OnLoad 是 与 匈 像 和 文档 的 body 部 分 关联 的 
事件 。 奋 要 奏 看 对 于 给 定 的 页 面 元 素 及 给 定 的 浏览 器 文 持 哪些 事件 ， 可 以 选中 页 徊 上 的 元 
素 之 后 ， 单 击 “ 行 为 ”和 面板 上 的 “显示 所 有 事件 ”按钮 ， 如 图 10-1 所 示 。 
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动作 由 预先 编写 的 JavaScript 代 码 组 成 ， 通 过 在 网 页 中 执行 这 段 代 码 执行 特定 的 任 
务 ， 比 如 打开 浏览 器 窗口 、 显 示 或 隐藏 元 素 、 检 查 表 单 或 应 用 Spry 效 果 等 。 

单个 事件 可 以 触发 多 个 不 同 的 动作 ， 这 些 动作 发 生 的 顺序 可 以 在 Dreamweaver 中 被 指 
定 ， 从 而 达到 需要 的 效果 。 


利用 行为 可 以 实现 用 户 和 网 页 之 间 的 交互 。 用户 通 过 在 网 页 中 触发 一 定 的 事件 来 引发 
一 些 相应 的 动作 。 在 Dreamweaver 中 ， 添 加 和 控制 行为 主要 是 在 “行为 ”面板 上 实现 的 。 
如 果 有 必要 ， 还 可 以 直接 打开 对 应 的 HTML 源 文件 ， 在 其 中 的 代码 进行 必要 的 修改 。 

执行 “和 窜 口 ”/“ 行 为 ” 末 蛙 命令 ， 即 可 打开 “行为 ”面板 ， 如 图 10-2 所 示 。 
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图 10-1 事件 列表 图 10-2 “行为 ”面板 


该 面板 中 各 个 部 分 的 功能 重要 介绍 如 下 : 

e : 仪 列 出 附加 a 到 当前 元 素 的 动作 对 应 的 事件 。 

事件 被 分 别 划 归 到 客户 站 或 服务 亏 问 类 别 中 。 每 个 类 列 的 事件 都 包含 在 一 个 可 折 登 的 
列表 中 ， 可 以 单 击 类 别名 称 劳 边 的 加 号 或 减 写 控 钮 展开 或 折 胎 该 列表 。 

e: 在 行为 列表 中 按 字 母 降序 列 出 可 应 用 于 当前 元 素 的 所 有 事件 。 

e: 弹出 行为 列表 ， 包 合 可 以 附加 到 当前 所 选 元 么 的 动作 。 对 当前 不 能 使 用 的 行为 ， 

则 以 灰色 显示 。 

e -: 删除 当前 选择 的 行为 。 

e - 和”: 改变 附加 到 当前 页 面 元 素 的 所 有 动作 的 执行 顺序 。 

@“ 事 件 ”: 单 击 行为 列表 中 所 选 事件 名 称 劳 边 的 盘 头 投 钮 ， 即 可 打开 如 疼 10-2 所 示 

的 事件 列表 ， 其 中 包含 可 以 触发 指定 动作 的 所 有 事件 。 

只 有 在 选择 了 行为 列表 中 的 茶 个 事件 时 才 显 示 此 菜单 。 根 据 所 选 对 象 的 不 同 ， 显 示 的 
事件 也 有 所 不 同 。 如 宁 未 显示 预期 的 事件 ， 则 应 检查 是 否 选择 了 正确 的 网 页 元 素 或 标签 。 

e "ft": 用 于 设置 一 个 事件 触发 的 动作 。 
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行为 被 规定 附属 于 用 户 页 面 上 的 某 个 特定 的 元 素 ， 可 以 是 一 个 文本 链接 、 一 个 图 像 其 
至 《body》 标 识 ， 但 是 不 能 将 行为 绑 定 到 纯 文 本 ， 诸 如 《p> 和 《span》 等 标签 。 
下 面 通 过 一 个 简单 实例 演示 将 行为 附加 到 页 面 元 素 的 具体 步骤 
01 选取 页 面 元 素 的 标识 。 本 例 选 择 页 面 中 插入 的 一 张 图 片 。 
所 有 的 行为 被 连接 到 特定 的 HTML 元 素 上 。 用 户 可 以 将 某 个 行为 附加 于 来 自 某 个 表单 
中 从 <body> 到 <textarea>》 中 的 任何 元 素 。 如 末 某 种 行为 不 可 用 ， 是 因为 页 面 中 还 没有 其 对 
应 的 HTML 标签 。 
02. JEEP BIB VESs. quf "Ocfb" / "Fotrvu" / "wlvidsdCTRVEU DEHRN 
令 ， 在 “结果 ”面板 中 打开 “浏览 器 兼容 性 检查 ”页 面 。 单 击 左 侧 的 绿色 三 角形 按钮 ， 从 
弹出 菜单 中 选择 “设置 ”命令 ， 如 图 10-3 所 示 。 


了 结果 搜索 | 参考 | 验证 ”浏览 器 兼容 性 检查 链接 检查 器 站 点 报 洁 | FTP 记录 | 服务 器 调试 去 
D. "T 问题 pUEmEEBABm 

检查 浏览 器 兼容 性 (C) 要 开始 使 用 ， RIS, 然后 从 堪 贡 的 绿色 盘 头 菜单 中 选择 

编辑 被 知 略 问题 的 列表 人 E) ZU I 


3BE T Dreamweaver 未 报告 的 呈现 问题 ? 请 检 查 Adobe. 
上 的 新 问题 报告。 


图 未 榈 而 到 在 何 问题 - 未 松 而 到 任何 问题- 
图 10-3 选择 “设置 ”及早 项 


此 时 打开 如 图 10-4 左 图 所 示 的 “目标 浏览 器 ”对 话 框 。 
03. 选中 某 种 浏览 器 之 后 ， 单 击 其 后 的 下 拉 荣 单 ， 可 以 从 中 选择 目标 浏览 器 的 最 低 
版 本 。 如 图 10-4 右 图 所 示 。 本 例 使 用 默认 设置 。 


r E 
目标 浏览 回 OQ | 日 标 浏览 器 
Dil Ss se Reis (8) : pulsas fell hd Q0 : 
ra 了 ES EN v Firefox 
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图 10-4 “目标 浏览 器 ”对 话 框 
不 同 的 浏览 融和 不 同 的 浏览 右上 版 本 文 持 不 同 的 事件 。 选 择 的 目标 浏览 右 决 定 哪些 元 素 


被 支持 用 于 一 个 特定 元 素 。 例 如 ，Internet Explorer 4.0 相 比 于 Navigator 4.0 或 任何 
3.0 浏览 费 ， 有 一 个 宽泛 得 多 的 用 于 每 个 元 素 的 事件 排列 。 
04 选择 一 个 动作 。 单 击 “ 行 为 ”面板 上 的 加 号 (+) 按钮 ， 从 动作 弹出 式 菜单 中 选 

择 一 个 动作 。 本 例 选 择 “ 交 换 图 像 ” 行 为 。 

行为 是 为 啊 应 某 一 具体 事件 而 采取 的 一 个 或 多 个 动作 。 当 指定 的 事件 被 触发 时 ， 将 运 
行 相应 的 JavaScript 程序 ， 执 行 相应 的 动作 。 所 以 当 创 建行 为 时 ， 必 须 先 指定 一 个 动作 ， 
然后 再 指定 触发 动作 的 事件 。 

此 外 ，Dreamweaver 只 使 那些 可 用 于 特定 页 面 元 素 的 动作 处 于 激活 状态 。 采 单 中 某 些 
动作 灰 显 的 原因 可 能 是 当前 文档 中 不 存在 所 害 的 对 象 。 如 果 所 选 的 对 和 象 无 可 用 事件 ， 则 所 
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有 动作 都 灰 显 。 
行为 的 强大 功能 来 目 于 它 的 灵活 性 。 每 个 动作 都 市 有 一 个 特定 的 对 话 框 ， 用 于 用 户 目 
定义 行为 。 
05 输入 参数 。 在 行为 列表 中 选择 “交换 图 像 ” 行 为 之 后 ， 打 开 “ 交 换 图 像 ” 对 话 框 。 
单 击 “浏览 ”按钮 ， 浏 览 并 定位 到 将 设置 为 孔 标 经 过 时 显示 的 图 像 。 如 图 10-5 所 示 。 
ET @| 。 标签 检查 路 [ER 
Fe | BiE|GOU |i ne 


(9m& J| [r*]g | + —- 4 v7 
E TE 
ss SEARBENS 


设 定 原始 档 洲 : 386 gif | ELE 


图 像 : 


v 预先 载 入 图 像 
Vo 鼠标 滑 开 时 恢复 图 慢 


图 10-5 “交换 图 像 ” 对 话 框 图 10-6 选择 事件 


06 设置 事件 。 单 击 “ 确 定 ” 按 钮 关闭 “交换 图 像 ” 对 话 框 。 此 时 ,“ 行 为 ”面板 中 
己 列 出 了 已 应 用 的 动作 及 默认 的 事件 。 单 击 事件 下 拉 表 单 ， 可 以 从 中 选择 需要 的 事件 。 如 
图 10-6 所 示 。 
本 例 对 一 个 图 像 附 加 了 “交换 图 像 ” 行 为 ， 默认 的 事件 为 onMouseOver. Dreamweaver 
CS5 还 默认 为 该 图 像 应 用 了 “恢复 交换 图 像 ” 行 为 ， 事件 为 onMouse0ut。 本 例 使 用 默认 的 
事件 。 
在 Dreamweaver CS5 中 ， 可 以 为 每 个 选 定 的 页 面 元 素 指 定 多 个 动作 。 动 作 以 它们 在 行 
为 面板 的 动作 列表 中 列 出 的 顺序 依次 发 生 。 
07 按照 第 4 6 步 的 方法 为 页 面 元 素 添 加 其 他 行为 。 
08. 保存 文档 。 按 Fl12 键 在 浏览 器 中 预览 行为 的 效果 。 
当 和 鼠标 移 到 图 片上 时 ， 显 示 在 “交换 图 像 ” 对 话 框 中 选择 的 “原始 档 ” 文 件 ， 将 鼠标 
移 开 ， 则 恢复 显示 原来 的 图 片 。 
提示 : 行为 不 能 附加 到 纯 文 本 ， 但 可 以 被 附加 于 一 个 链接 。 因 此 ， 辱 要 把 一 个 行为 附加 于 文本 ， 一 个 人 简 
单 的 方法 是 为 文本 添加 一 个 空 链接 〈 在 “链接 ”文本 框 中 输入 javascript:;, 或 直接 键入 一 个 #) ， 然 后 
将 行为 附加 于 这 个 链接 。 


Dreamweaver 预 置 的 行为 功能 不 仅 很 强大 ， 而 且 很 灵活 。 在 附加 了 行为 之 后 ， 可 以 更 
改 和 触发 动作 的 事件 、 添 加 或 删除 动作 以 及 更 改动 作 的 参数 。 修 改行 为 的 操作 步骤 如 下 : 
CD 执行 “窗口 ”A/“ 行 为 ”命令 ， 打 开行 为 面板 。 
(20 选择 一 个 附加 了 行为 的 对 有 象 。 
(3) 在 “行为 ”面板 中 双击 要 重新 编辑 的 行为 名 称 ， 然 后 在 弹出 的 对 话 框 中 重新 议 
置 动 作 的 参数 。 
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此 外 ， 所 有 的 预 置 行为 都 可 以 被 修改 ， 并 且 作 为 一 个 新 的 行为 添加 到 行为 列表 中 。 只 
要 将 相应 的 HTML 文 件 复制 到 Dreamweaver 安 装 上 日 录 的 Configuration\Behaviors\Action 文 
件 夹 中 ， 然 后 重新 局 动 Dreamweaver 即 可 。 


如 采 不 再 需要 指定 元 系 已 附加 的 茶 个 行为 ， 在 “行为 ”面板 中 选择 该 行为 ， 然 后 单 击 
面板 顶部 的 减 号 按钮 ， 即 可 删除 。 如 图 10-7 所 示 。 
rss NNNM 


| 属性 | 行为 | 标签 “ingy 


图 10-7 删除 附加 的 行为 


Dreamweaver CS5 为 常见 的 行为 动作 编写 了 代码 ， 并 进行 封装 。 读 者 只 需要 简单 地 设 
定 一 些 参 数 变 量 束 可 以 方便 地 为 网 页 生成 一 些 复杂 的 交互 和 动态 功能 。 
下 面 通 过 一 些 实 例 回 读者 介绍 Dreamweaver CS5 内 置 的 行为 。 


Li 中 0. 5. 1 改变 属性 


“改变 属性 ”动作 可 以 动态 地 改变 某 一 个 对 象 的 属性 值 ， 例 如 AP 元 素 的 背景 图 像 或 背 
景色 ， 图 像 的 边框 和 样式 。 这 些 属性 的 具体 效果 由 所 使 用 的 浏览 器 决定 。 
下 面 通过 一 个 简单 实例 汗 示 使 用 改变 属性 行为 的 步骤 。 
01. 狐 建 一 个 HTML 文 档 ， 并 在 页 面 中 插入 一 张 表单 。 
02. 打开 “常用 ”插入 面板 ， 然 后 单 击 “ 插 入 div 标 签 ” 功 能 按钮 。 
03. 在 弹出 的 对 话 框 中 的 “插入 ”下 拉 列 表 中 选择 “在 插入 点 ”; 在 “ID” 文 本 框 
中 输入 《<div> 标签 的 名 称 dd。 人 然后 单 击 对 话 框 底部 的 “新 建 CSS 规 则 ”按钮 。 
04 骨 在 弹出 的 “新 建 CSS 规 则 ”对 话 框 中 设置 选择 需 类 型 为 “标签 ”， 然 后 在 “选择 
器 名 称 ” 下 拉 列 表 中 选择 标签 div。 
05 切换 到 “区 块 ”分 类 ， 设 置 对 齐 方式 为 “居中 对 齐 ”， 然 后 单 击 “ 人 确定 ”按钮 关 
闭 对 话 框 。 
06 在 div 标 签 中 插入 一 个 按钮 ， 然 后 在 属性 面板 上 将 按钮 的 “ 值 ” 设 置 为 “点 击 这 
里 ”; “动作 ”属性 设置 为 “无 ”。 
07 选中 按钮 ， 然 后 单 击 “ 行 为 ”面板 上 的 加 号 (+) 按钮 ， 在 弹出 荣 单 中 选择 “ 改 
变 属性 ”命令 ， 弹 出 如 图 10-8 所 示 的 “改变 属性 ”对 话 框 。 
08 在 “元 素 类 型 ”后 面 的 下 拉 列 表 中 选择 改变 属性 的 对 象 标 签 。 本 例 选 择 DIV。 
对 象 类 型 有 如 下 几 种 : 
e DIV、SPAN: 这 两 种 类 型 是 AP 元 素 标 签 ， 用 于 改变 AP 元 素 的 属性 。 
e IMG: 图 像 标 签 ， 用 于 改变 一 幅 图 像 的 属性 。 
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FORM: 表单 标签 ， 用 于 改变 表单 的 属性 。 
INPUT/CHEKBOX: 复 选 框 标签 ， 用 于 改变 复 选 框 的 属性 。 
INPUT/RADIO: 单 选 按钮 标签 ， 用 于 改变 单 选 按钮 的 属性 。 
INPUT/TEXT: 单行 文本 输入 框 标识 ， 用 语 改变 单行 文本 输入 框 的 属性 。 
INPUT/PASSWORD: 口令 输入 框 标记 ， 用 于 改变 口令 输入 框 的 属性 。 
TEXTAREA: 多 行文 本 输入 框 标签 ， 用 于 改变 多 行文 本 输入 框 的 属性 。 
SELECT: 选择 列表 项 标签 ， 用 于 改变 选择 列表 项 的 属性 。 

09 月 在 "USD 右 侧 的 下 拉 列 表 中 选择 已 命名 的 div 对 象 dd。 


取消 
x&n [uva  — gl 
尾 性 : 2 选择 : backgroundColor 6 


输入 : 
新 的 值 : 


图 10-8 “改变 属性 ”对 话 框 


10 在 “属性 ”区 域 选 中 “选择 ”， 然 后 在 后 面 的 下 拉 列 表 中 选择 一 项 要 改变 的 属 
性 ， 本 例 选 择 backgroundColor。 
如 条 选择 “输入 ”， 则 可 以 直接 在 后 面 的 文本 框 中 输入 要 改变 的 对 象 属 性 。 
11 9 在“ 狐 的 值 ” 后 和 面 的 文本 框 中 设置 所 选择 对 象 狐 的 属性 值 。 本 例 输入 green。 然 
后 单 击 “ 人 确定 ”按钮 关闭 对 话 框 。 
12 于 打开 “行为 ”和 面板 ， 为 改变 属性 动作 选择 需要 的 事件 onClick。 
139 你 存 文档 ， 并 在 实时 视图 中 进行 测试 。 
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图 10-9 “改变 属性 ”动作 的 效果 
在 浏览 帮 中 单 击 “点 击 这 里 ”按钮 时 ， 表 蛙 背 景 将 变 为 绿色 。 如 图 10-9 所 示 。 


[i0. 5.2 交换 图 像 /恢复 交换 图 像 


“交换 图 像 /恢复 交换 图 像 ” 动 作 通 过 更 改 人 img> 标 签 的 src 属 性 将 一 个 图 像 和 另 一 个 
图 像 进 行 交 换 。 使 用 此 动作 可 以 使 一 幅 图 像 产 生变 换 。“ 恢 复 交 换 图 像 ” 动 作 只 有 在 “ 交 
换 图 像 ” 动 作 之 后 使 用 才 有 效 。 

使 用 “交换 网 像 ”动作 的 步骤 如 下 : 

CD 选择 一 个 图 像 对 象 ， 并 打开 “行为 ”面板 。 

(2) 单 击 行 为 面板 上 的 加 号 (+) 按钮 并 从 动作 弹出 式 染 单 中 执行 “交换 岁 像 ”命令 ， 
弹出 “交换 图 像 ” 对 话 框 ， 如 图 10-10 所 示 。 

(3) 对 该 对 话 框 各 个 选项 进行 设置 ， 该 对 话 框 中 各 个 参数 的 功能 分 别 介 绍 如 下 : 
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e "E". 该 列表 框 中 显示 当前 文档 窗口 中 所 有 的 图 像 名 ， 从 中 选择 一 幅 图 像 作 


为 变换 之 前 的 图 像 。 

e  “ 设 定 原 始 档 为 ”: 设置 叔 换 图 像 。 
注意 : 由 于 只 有 sre 属性 受 此 动作 的 影响 ,所 以 应 该 换 入 一 个 与 原 图 像 尺 寸 (高 度 和 宽度 ) 相同 的 图 像 。 
否则 ， 换 入 的 图 像 显示 时 会 被 压缩 或 扩展 ， 以 使 其 适应 原 图 像 的 尺寸 。 

e “预先 载 入 图 像 ”: 变换 的 图 像 在 打开 网 页 时 载 入 到 计算 机 的 缓冲 区 中 。 

@“ 限 标 消 开 时 恢复 图 像 ”: 将 孔 标 从 图 像 上 移 开 后 ， 显 示 原 图 像 。 


E ,| 
变换 图 便 o 
n: nn—————A!eÀ 
mis 
8885 00 
设 定 原始 档 汶 : ME... 
v 预先 载 和 图像 
v 鼠标 滑 开 时 恢复 图 估 


图 10-10 “交换 图 像 ” 对 话 框 


(4) 单 击 “确定 ”按钮 ， 然 后 为 动作 选择 所 需 的 事件 。 
为 页 面 对 象 添加 “交换 几 像 ”行为 之 后 ，Dreamweaver 将 目 动 为 页 面 对 象 添加 “恢复 


交换 图 像 ” 行 为 。 


[10. 5.3 弹出 信息 
“弹出 信息 ”动作 显示 一 个 市 有 指定 消 县 的 JavaScript 和 警告 。 
有 一 个 “确定 ”按钮 ， 所 以 使 用 此 动作 可 以 提供 信息 ， 而 不 能 为 用 户 提 供 选 择 。 
下 面 通 过 一 个 简单 实例 演示 使 用 “弹出 信息 ”动作 的 步骤 。 
01. 选 择 一 个 对 象 ， 例 如 页 面 中 的 一 张 图 片 。 然 后 打开 “行为 ”面板 。 
02. 单 击 行为 面板 上 的 加 号 (+) 按钮 ， 并 从 动作 弹出 菜单 中 执行 “弹出 信息 ”命令 ， 


弹出 如 图 10-11 所 示 的 “弹出 信息 ”对 话 框 。 


警告 只 


因为 JavaScript 警 告 只 


E 
弹出 信息 e 
; | 一 确定 一 | 
消息 : - 
职 消 
帮助 0 


图 10-11 “弹出 信息 ”对 话 框 


yg 75b» 
[9] 


03. 在 “消息 ”文本 域 中 输入 需要 的 消息 。 本 例 输入 “出 水 天 三 
04. 单 击 “ 确定? 按钮 ,然后 在 “行为 ?面板 中 选择 所 需 的 事件 。 本 例 选 择 onMouse0ver。 
05 保存 文档 ， 然 后 在 浏览 器 中 预 匈 效果， 如 图 10-12 所 示 。 


单 击 对 话 框 中 的 “确定 ”按钮 即 可 关闭 对 话 框 。 
“弹出 信息 ”行为 不 能 控制 JavaScript 警告 的 外 观 ， 这 是 由 访问 者 的 浏览 右 决 定 的 。 如 宋 和 希望 对 


提示 : 
消息 的 外 观 进行 更 多 的 控制 ， 可 以 考虑 使 用 “打开 浏览 喜 窗 口 ” 行 为 。 
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图 10-12 “弹出 信息 ”动作 的 效果 


Lio. 5.4 打开 浏览 器 窗口 


使 用 “打开 浏览 器 窗 口 ” 动 作 在 打开 当前 网 页 的 同时 ， 还 可 以 再 打开 一 个 新 的 窗口 。 
此 外 ， 用 户 还 可 petiuit ii 名 称 、 amm 菜单 栏 等 属性 。 
下 面 通过 一 个 简单 的 例子 演示 使 用 “打开 浏览 器 窗口 ”动作 的 步骤 。 

01 在 页 面 中 选中 需要 添加 该 和 为 的 对 条， 如 文本 “进入 百度 MP3 搜 索 ”， 然 后 打开 


“行为 » 面板 。 
02) 单 击 “行为 ”面板 上 的 加 号 (+) 按钮 ， 并 从 动作 弹出 式 菜单 中 执行 “打开 浏览 


骼 窗口 ”命令 ， 弹 出 如 岁 10-13 押 示 的 “打开 浏览 豆 窗 口 ” 对 话 框 。 


mi. mier m Sans NUM 
H3ETRUÉ 天 要 时 全 用 说 条 
ists 调整 大 小 手 情 


EDO 


图 10-13 “打开 浏览 器 窗口 ”对 话 框 
03. 对 该 对 话 框 中 各 个 参数 进行 设置 ， 该 对 话 框 中 各 个 参数 的 功能 分 别 介 绍 如 下 : 
“要 显示 的 URL”: 需要 显示 的 文件 的 URL 地 址 。 本 例 输入 http://mp3. baidu. com/. 
“窗口 宽度 ”: 用 于 议 置 打开 的 浏 遇 器 窗口 的 宽度 。 本 例 设置 为 400。 
“窗口 局 度 ”: HTABIIDTBDU SS E LEE. Adfhlu E 300. 
“属性 ”: HET EHTAT II DU Vid fd 3 E] 此 显示 属性 ， 它 有 6 个 选项 ， 可 以 选中 
其 中 的 一 个 或 多 个 显示 特性 。 本 例 选 中 全 部 属性 选项 。 
@“ 和 窗口 名 称 ”: IJ JD as HIE 44.4 RA "BBREMP3" , 
04, Hub "ig" TR EAS VABMEXSTEBTISHQSÉfE. AS fEonClick. 
05 UEOCRI. TEDU V dS HP TOLUUAT 2 IR] ACA dil 14 7n. 


" o 32-5-.2:6 4 4 m*w-JX zo 
» ww E 6 
| 1. Nae t4 ott ooo 
"E d "E TT B 
| | Ww *«- nn ue us ws n- 
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图 10-14 “打开 浏览 器 窗口 ”动作 的 效果 
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[L]10.5. 5 拖 动 AP 元 素 


使 用 “ 拖 动 AP 元 么 ”动作 可 以 让 浏览 者 在 一 定 的 范围 内 任意 拖 动 AP 元 陛 。 使 用 此 动作 ， 
可 以 创建 拼图 游戏 、 滑 块 控 件 和 其 他 可 移动 的 界面 元 聚 等 交互 式 效果 。 

下 面 通过 一 个 简单 的 例子 演示 “ 拖 动 AP 元 素 ” 的 操作 步骤 。 

01 朋 选择 “插入 ”/“ 布 局 对 象 ”/“AP Div” 菜 单 命令 ， 或 单 击 “ 布 局 ”面板 上 的 
“绘制 AP Div” 投 钮 ， 然 后 在 页 面 中 按 下 鼠标 元 键 拖 出 一 个 矩形 ， 即 可 绘制 一 个 AP Div。 

02 旧 将 光标 定位 于 AP 元 素 中 ， 在 其 中 插入 一 张 图 片 。 

03. 单 击 “ 文 档 ” 窗 口 雹 下 角 标 签 选择 套 中 的 《body> 标 签 。 

04 睛 打开“ 行为” 面板， 然后 单 击 加 号 〈+) 投 钮 ， 从 动作 弹出 菜单 中 选择 “ 拖 动 AP 
元 系 ” 人 命令。 弹出 如 网 10-15 所 示 的 “ 拖 动 AP 元 素 ” 对 话 框 。 


re AP 元 素 o 
基本 | md 
|. MUR 一 | 
AP 元 素 : |div "apDivl" 取消 
移动 : | 不 限制 旧 帮助 加) 
放下 目标 : A HE: 取得 有 目前 位 置 
靠 齐 距离 像素 接近 放下 目标 


Jen AP JC @ 
基本 |. 高 级 .; 确定 
拉动 控制 点 : zi 
&xmr V 将 元 来 置 于 顶层 MU [SERI 上 SER QD 
呼叫 TavaScript: 
放下 时 : 呼叫 Javaser 中 只 有 在 靠 齐 时 


图 10-15 “ 拖 动 AP 元 素 ” 对 话 框 


“ 拖 动 AP 元 素 ” 对 话 框 由 “基本 ”和 “局 级 ”两 个 标签 组 成 。 

05 在 “AP 元 素 ” 下 拉 列 表 中 选择 要 附加 行为 的 AP 元 素 。 本 例 选 择 apDiv1， 即 本 例 
"B CIO 步 在 页 面 中 绘制 的 AP 元 素 的 名 称 。 

06 在 “移动 ”下 拉 列 表 中 指定 AP 元 素 的 移动 方式 。 本 例 选 择 “ 限 制 ”， 且 “上 ?”、 
"BR". "Ug". "URP AI ELZJ280. 600. 5051400. 

如 果 选 择 “ 限 制 ”， 对 话 框 中 会 添加 “上 ”、“ 下 ”、“ 左 ”和 “ 右 ”4 个 参数 。 在 
参数 后 面 的 文本 框 中 填 入 数字 ， 单 位 是 像素 ， 即 确定 了 AP 元 系 的 拖 动 范 围 ， 这 些 值 是 相对 
于 AP 元 素 的 起 始 位 置 而 言 的 。 

对 于 背 块 控件 和 可 移动 的 布景 (例如 文件 抽 层 、 窗 帘 和 小 百叶 窗 〉，， 请 选择 “限制 ” 
移动 方式 。“ 不 限制 ”移动 适用 于 拼 板 游戏 和 其 他 拖 放 游戏 。 

Bu. 若 要 只 允许 垂直 移动 ， 则 在 “上 ”和 “下 ”文本 框 中 输入 正 值 , 在 “ 左 ” 和 “ 右 ” 文 本 框 中 输入 0; 
若 要 只 允许 水 平移 动 ， 则 在 “ 左 ” 和 “ 右 ” 文 本 框 中 输入 正 值 ， 在 “上 ”和 “下 ”文本 框 中 输入 0。 

07 在 “放下 目标 ”区 域 指 定 拖 放 的 目的 地 位 置 。 本 例 在 “ 左 ”、“ 上 ”文本 框 中 

分 别 输入 300。 
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“ 左 ” 和 “上 ”用 于 设置 拖 放 的 目的 位 置 距 页 面 左 端 和 上 端的 距离 ， 单 位 是 像素 。 当 
AP 元 素 的 左 坐 标 和 上 坐标 与 设置 的 “ 左 ” 和 “上 ” 框 中 输入 的 值 匹 配 时 ， 便 认为 AP 元 
素 已 经 到 达 拖 放 目 标 。 这 些 值 是 与 浏览 器 窗口 左上 角 的 相对 值 。 

08. 单 击 “ 取 得 目前 位 置 ” 按 钮 可 以 在 文本 框 中 目 动 填充 AP 元 素 目前 的 位 置 参 数 。 
本 例 不 单 击 该 按钮 。 

09 9 在“ 徘 齐 距 离 ” 右 侧 的 文本 框 中 设置 AP 元 素 自 动 吸 附 到 目标 位 置 的 距离 。 较 大 
的 值 可 以 使 访问 者 较 容 易 找 到 拖 放 目标 。 本 例 设 置 为 50。 

对 于 简单 的 拼 板 游戏 和 布景 处 理 ， 到 此 步骤 为 止 即 可 。 大 要 定义 AP 元 素 的 拖 动 控制 
点 、 在 拖 动 AP 元 素 时 跟踪 其 移动 ， 以 及 在 放下 AP 元 素 时 触发 动作 ， 需 要 进入 “高 级 ” 
选项 卡 进一步 设置 。 

10 切换 到 “高 级 ”页 面 ， 在 “ 拖 搜 控制 点 ”下 拉 列 表 中 指定 访问 者 单 击 AP 元 素 可 
以 触 友 动作 的 区 域 。 本 例 选 择 “ 整 个 元 素 ”。 

TU UE; AP 元 素 的 特定 区 域 才能 拖 动 AP 元 素 ， 则 选择 “元 素 内 的 区 域 ”， 并 设 
置 该 区 域 的 “EF”、“ 下 ”、“ 左 ”和 “ 右 ”; IBI: AP 元 素 中 的 任意 位 置 就 可 以 
拖 动 此 AP 元 素 ， 则 选择 “整个 元 素 ”。 

11 旧 在 “ 拖 动 时 ”区 域 选中 “将 元 素 置 于 顶层 ” 复 选 枉 ， 即 AP 元 素 在 拖 动 时 始终 在 
i EE. 

12 有 上 月 在 “然后 ”下 拉 列 表 中 选择 拖 动 后 的 位 置 。 本 例 保 留 默认 设置 。 

“ 留 在 最 上 方 ” 表 示 将 AP 元 素 拖 动 后 ， 你 留 在 最 前 和 而; “恢复 Z 轴 ”表示 将 其 恢复 
到 它 在 堆 早 顺序 中 的 原 位 置 。 

13. 在 “呼叫 JavaScript” 文 本 框 中 键入 拖 动 AP 元 素 时 要 执行 的 JavaScript 肢 本 程 
序 或 函数 名 称 。 本 例 保留 空白 ， 即 不 调用 脚本 程序 。 

14 在 “放下 时 ， 呼 叫 JavaScript” 文 本 框 中 键入 当 AP 元 系 钻 移动 到 目标 位 置 时 调 
用 的 JavaScript 脚 本 程序 或 函数 名 称 。 其 中 ， 选 中 “只 有 在 徘 齐 时 ”选项 ， 即 只 有 在 AP 元 
素 到 达 拖 放 目 标 时 才 执 行 该 JavaScript。 本 例 留 空 。 

15. 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 并 在 “行为 ”面板 中 选择 需要 的 触发 事件 。 本 
例 使 用 默认 的 onLoad 事 件 。 

16 保存 文档 。 并 在 浏览 器 中 预览 该 行为 的 效果 ， 如 图 10-16 所 示 。 


EA 
口 XA XS - UI Imadthon Qn [Et | Cha Ch 
x"-— -«aL. 290 «mo au sio A0 WfoOoí6 WA faRiuro XE gukL 3900 cmo  GOrübp HUMO IACO CEU NA niirap 
) OQ S-2-823-40 Yr &- cm 'o -(-— 1-0 o d*-n-3-f34r» 8-p) 9 -(E-L 
locsboe i 1) smi Bnun- HAE wi ree cate] T 条 .5 suo: 


e2 


图 10-16 ” “ 拖 动 AP 元 素 ” 的 效果 
在 独 像 上 任意 位 置 按 下 鼠标 左 键 ， 即 可 在 本 例 指 定 的 窍 形 范围 内 随意 拖 动 疼 像 。 
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LL]10. 5. 6 Spry 效 果 


Spry 效 果 可 以 修改 元 素 的 不 透明 上 度 、 缩 放 比 例 、 位 置 和 样 陈 属性 〈 如 背景 颜色 ) SE, 
通 第 用 于 在 一 段 时 间 内 高 之 显 示人 信息， 创建 动画 过 滤 或 者 以 可 视 方 式 修 改 页 面 元 素 。 由 于 
这 些 效果 都 基于 Spry， 因 些 ， 当 用 户 单 击 应 用 了 效果 的 对 象 时 ， 只 有 对 和 象 会 进行 动态 更 
狐 ， 而 不 会 刷 狐 整 个 HTML 页面。 

Spry 鸡 果 可 直接 应 用 于 使 用 JavaScript 的 HTML 页 面 上 几乎 所 有 的 元 素 ， 轻 松 地 问 
页 面 元 素 添 加 视觉 过 渡 ， 而 无 需 其 他 目 定 义 标 签 。 如 果 要 问 茶 个 元 素 应 用 效果 ， 访 元 素 当 
前 必须 处 于 选 定 状态 ， 或 者 它 必 须 具 有 一 个 有 效 的 也 。 如 采访 元 素 未 选中 ， 且 没有 有 效 的 
ID 值 ， 则 需要 问 HTML 代码 中 添加 一 个 ID fH. 

下 面 通过 一 些 俐 单 的 例子 演示 为 页 面 元 素 深 加 Spry 效 果 的 一 般 步 又 。 

01 选择 要 应 用 效果 的 内 容 或 布局 对 象 ， 也 可 以 直接 进入 下 一 步 。 本 例 选 中 页 面 中 
JEN EI] IR ALT e 

02. 单 击 行为 面板 中 的 加 号 co TIL, Askibsemrpxete "HOUR" , JEXGTESUR T 
有 水 单 中 需要 的 效 末 名 称 。 本 例 选择 “ 增 大 /收缩 ”选项 。 弹 出 如 图 10-17 上 所 示 的 “ 增 大 / 收 
Za" xp te. 

03. 从 “目标 元 系 ” 荣 单 中 选择 要 应 用 效果 的 对 象 的 ID。 如 采 已 经 选择 了 一 个 对 象 ， 
请 选择 “< 当前 选 定 内 容 >”。 本 例 选择 “< 当前 选 定 内 容 >”。 

04 上 在 “ 效 末 持续 时 间 ” 文 本 框 中 指定 效果 持续 的 时 间 ， 单 位 为 蛙 秒 。 本 例 使 用 默 
认 设 置 100ms 。 

05 在 “效果 ”后 的 下 拉 列 表 框 中 选择 要 应 用 的 效果 。 本 例 选 择 “ 增 大 ”。 

06 分别 在 “ 增 大 日 /收缩 日 ”和 “ 增 大 到 /收缩 到 ”文本 框 中 ， 以 百分比 大 小 或 像 
素 值 指定 对 象 在 效果 开始 时 和 结束 时 的 大 小 。 本 例 分 别 输 入 100%、120%。 

07 在 “ 增 大 到 /收缩 到 ”列表 框 中 选择 元 素 增 大 或 收缩 到 的 位 置 ， 可 以 是 页 面 的 左 
上 角 或 是 页 面 的 中 心 。 本 例 选 择 “ 居 中 ”。 

08. 如 条 和 硕 望 连续 单 击 可 以 在 增 大 或 收缩 间 切 换 ， 请 选中 “切换 效果 ” 复 选 枉 。 本 
例 选 中 此 复 选 框 。 

09 9 保存 文档 ， 并 在 浏览 右 中 预 多 效果， 如 图 10-18 所 示 。 

[ 增 大 /收编 o 
ecco. CENE oj 

uc | 毫秒 "E 
收缩 自 : (100 


收缩 到 : 0 * 
收缩 到 : 


切换 效果 


图 10-17 "SÉ AA" os uite 图 10-18 “ 增 大 / 收 缠 ” 效 果 


初始 时 ， 图 片 以 “ 增 大 自 ” 文 本 框 中 的 100% 显 示 ， 在 图 片上 单 击 鼠 标 ， 则 以 “ 增 大 到 ” 
文本 框 中 指定 的 120% 显 示 。 再 次 单 击 良 标 ， 恢 复 到 以 100% 显 示 。 
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Dreamweaver CS5 中 几 种 香 用 的 Spry 效 果 的 功能 、 使 用 范围 和 具体 参数 的 设置 方法 : 
e 增 大 /收缩 : 该 效果 使 元 素 变 大 或 变 小 , 适用 于 address. dd. div. dl. dt. form, 
p. ol. ul, applet, center, dir. menu 或 pre 对 象 。 
e Dk: 该 效 末 使 元 素 从 页 面 的 左上 和 角 消失 , 仅 适 用 于 address. dd. div. dl. dt. 
form, img. p. ol, ul. applet. center, dir, menu 或 pre 对 象 。 
e 显示 / 渐 隐 : 使 元 妹 显 示 或 渐 隐 。 此 效 末 适用 于 除 applet. body. iframe, object, 
tr. tbody 或 th 以 外 的 所 有 HTML 对 象 。 
在 “ 渐 隐 目 / 显 示 目 ”文本 框 中 定义 显示 此 效果 所 需 的 不 透明 度 百 分 比 。 
在 “ 渐 隐 到 /显示 到 ”文本 框 中 设置 要 渐 隐 到 的 不 表 明 大白 分 比 。 
如 果 选 择 “ 切 换 效 果 ”， 则 该 效果 是 可 逆 的 ， 即 连续 单 击 可 从 “ 渐 隐 ”转换 为 “显示 ” 
或 从 “显示 ”转换 为 “ 渐 隐 ”。 
e 网 动 : 该 效果 模拟 从 左 回 右 晃动 元 素 ， 仅 适用 于 address. blockquote. dd. div. 
dl、 dt、fieldset、 form、 hl、 h2、 h3、 h4、 h5、h6、1iframe、img、object、p、 
ol. ul. li. applet. dir. hr. menu. pre 或 table 对 象 。 
e Jj5953.: | Ltsxym Fí2zJ762s. [DW3& Hl] d blockquote. dd. div. form 或 center 
对 象 。 滑 动 效 果 要 求 在 要 请 动 的 内 容 周 围 有 一 个 《div> 标签 。 
分 别 在 “上 清 目 /下 请 目 ” 和 “上 清 到 /下 请 到 ”文本 框 中 ， 以 百分比 或 像 际 值 形 式 定 
义 起 始 滑动 点 和 结束 滑动 点 。 
如 有 条 硕 望 通过 连续 单 击 实现 上 下 滑动 ， 则 选中 “切换 效果 ”。 
e JD: 该 效果 模拟 百叶 窗 效 果 ， 问 上 或 癌 下 滚动 百叶 窗 来 隐藏 或 显示 元 素 。 仅 适 
Fd address. dd. div. dl. dt. form. hl. h2. h3. h4. h5. h6. p. ol, ul. 
li. applet. center, dir. menu 或 pre 对 象 。 
fE "pn bx H/I PF35tH EH XE. ELELAT EGEXIR ZR TUE SN E SORS TB ERES UR TS 
动 点 。 这 些 值 是 从 对 和 象 的 项 部 开始 计算 的 。 在 “同上 扩 帘 到 / 问 下 让 窒 到 ” 域 中 ， 以 百 分 
比 或 像素 值 形 式 定 义 遮 窒 的 结束 滚动 点 。 这 些 值 是 从 对 象 的 顶部 开始 计算 的 。 
如 有 条 硕 望 连 续 单 击 实现 上 下 滚动 ， 则 选择 “切换 效 末 ”。 
e uos: VAXUORuI UL SBUETGURHUH ABI xi T applet. body. frame, 
frameset 或 noframes 以 外 的 所 有 HTML 对 象 。 在 “起 始 颜 色 ” 和 “结束 闫 色 ” 
后 面 的 颜色 井中 分 别 选 择 开始 高 有 沉 显示、 结束 局 党 显示 的 磊 色 。 
在 “应 用 效果 后 的 颜色 ”后 和 面 的 闫 色 井 中 选择 该 对 象 在 完成 遇 有 党 显示 之 后 的 闫 色 。 
如 末 布 望 通过 连续 单 击 来 循环 使 用 高 完 颜 色 ， 则 选择 “切换 效 末 ”选项 。 
和 其 他 行为 一 样 ， 可 以 将 多 个 效果 行为 与 同一 个 对 象 相关 联 以 产生 有 趣 的 结果 。 
注意 : 当 使 用 效果 时 ， 系 统 会 在 代 人 码 视 图 中 将 不 同 的 代码 行 添加 到 您 的 文件 中 。 其 中 的 一 行 代码 用 来 标 
iH SpryEffects. js 文件 ， 该 文件 是 包括 这 些 效果 所 必需 的 。 请 不 要 从 代码 中 删除 该 行 ， 否 则 这 些 效 果 
将 不 起 作用 。 


[L]10.5. 7 显示 -隐藏 元 素 


“显示 -隐藏 元 素 ” 动 作用 于 显示 、 隐 藏 或 恢复 一 个 或 多 个 页 面 元 标的 默认 可 见 性 。 
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此 动作 用 于 在 用 户 与 页 面 进行 交互 时 显示 信息 。 例 如 ， 当 用 户 将 鼠标 指针 滑 过 一 个 人 物 的 
图 像 时 , 可 以 显示 一 个 包含 有 关 该 人 物 的 姓名 、 性 别 、 年 龄 和 星座 等 详细 信息 的 页 面 元 素 ， 
还 可 用 于 创建 预先 载 入 页 面 元 素 ， 即 一 个 最 初 挡 住 页 的 内 容 的 较 大 的 页 面 元 素 ， 在 所 有 页 
组 件 都 完成 载 入 后 该 页 面 元 素 即 消失 。 
下 面 通过 一 个 简单 实例 演示 使 用 “显示 -隐藏 元 素 ” 动 作 的 一 般 步 骤 。 
01. 新建 一 个 HTML 文 档 。 在 页 面 中 插入 两 张 图 片 ， 并 在 属性 面板 中 分 别 为 图 片 命名 
为 happy 和 tree， 如 图 10-19 所 示 。 选 择 其 中 一 个 对 象 ， 如 本 例 中 的 happy， 然 后 打开 “ 行 


为 ”面板 。 


LEX imi @ 
元 素 : 确定 
img "tree 取消 
帮助 Q0 


图 10-19 ”页 面 中 插入 的 图 厂 图 10-20 “显示 -隐藏 元 素 ” 对 话 框 


02. 单 击 行为 面板 上 的 加 号 〈+) 按钮 ， 并 从 动作 弹出 式 某 单 中 执行 “显示 - 隐 疙 元 
系 ” 命 令 ， 弹 出 “显示 -隐藏 元 素 ” 对 话 框 ， 如 图 10-20 所 示 。 
该 对 话 框 中 各 个 参数 的 功能 分 别 介 绍 如 下 : 
e “元 素 ”: 在 列表 框 中 列 出 可 用 的 所 有 元 素 的 名 称 以 供 选 择 。 
@“ 显 示 ”: 单 击 此 按钮 ， 则 选中 元 素 可 见 。 
@“ 隐 藏 ”: 单 击 此 按钮 ， 则 选中 元 素 不 可 见 。 
e "SW": 单 击 此 按钮 ， 则 按 默认 值 决定 元 素 是 否 可 见 ， 一 般 是 可 见 。 
03 选中 元 素 img “happy”， 并 单 击 “隐藏 ”按钮 ， 然 后 单 击 “ 确 定 ” 关 闭 对 话 框 。 
04. 在 “行为 ”面板 中 为 该 动作 选择 事件 。 本 例 选 择 onMouseOver。 
05 在 “设计 ”视图 中 选中 图 片 tree， 然 后 单 击 行为 面板 上 的 加 号 (+) 按钮， 从 动 
作 弹 出 式 荣 单 中 执行 “显示 -隐藏 元 素 ” 命 令 ， 弹 出 “显示 -隐藏 元 素 ” 对 话 框 。 
06 选中 元 素 img “happy”， 并 单 击 “显示 ”按钮 。 然 后 单 击 “ 确 定 ” 关 闭 对 话 框 ， 
在 “行为 ”面板 中 为 该 动作 选择 事件 。 本 例 选 择 onMouseOver。 
07 9 保持 图 片 tree 的 选中 状态 ， 然 后 单 击 行 为 面板 上 的 加 号 (+) 按钮 ， 从 动作 弹出 
式 琳 单 中 执行 “显示 -隐藏 元 素 ” 命 令 ， 弹 出 “显示 -隐藏 元 素 ” 对 话 框 。 
08 选中 元 素 img “happy”， 并 单 击 “隐藏 ”按钮 。 然 后 单 击 “ 确 定 ” 关 闭 对 话 框 ， 
在 “行为 ”面板 中 为 该 动作 选择 事件 。 本 例 选择 onMouse0ut。 


图 10-21 “显示 -隐藏 元 素 ” 对 话 框 
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09 9 保存 文档 。 并 按 F12 键 在 浏览 器 中 预览 图 片 效 果 ， 如 图 10-21 所 示 。 
最 开始 页 面 上 的 两 张 图 片 都 显示 ; 将 鼠标 移 到 图 片 haappy 上 上 时， 该 图 片 隐 藏 ， 将 鼠标 
移 到 图 片 tree 上 时 ， 图 片 happy 显 示 ; 将 鼠标 从 图 片 tree 上 移 开 ， 图 片 happy 再 次 隐 减 。 


[L]t0.5. 8 检查 插件 


如 末 在 站 点 的 网 页 中 使 用 了 有 某 些 插件 技术 ， 如 Flash、Windows Media PlayerS$, JW 
通过 “ 检 醋 插件 ”动作 检查 用 户 的 浏览 器 中 是 否 安 装 了 相应 的 插件 。 如 果 用 户 安 站 了 这 些 
插件 ， 则 浏览 器 目 动 跳 转 到 含有 该 插件 搁 术 的 网 页 中 ; 如 果 没 有 安装 这 些 插件 ， 则 不 进行 
跳 转 或 跑 转 到 为 一 个 网 页 。 

使 用 “检查 插件 ”动作 的 步 又 如 下 : 

CI) 选择 一 个 页 面 对 象 并 打开 “行为 ”面板 。 
(2) Hag GO 按钮 ， 并 从 动作 弹出 式 采 单 中 执行 “ 检 醋 插件 ”命令 ， 弹 出 如 图 
10-22 所 示 的 “ 检 奉 插件 ”对 话 框 。 


DTI o 


[1 MEET MED E |. wc | 
oUE 
oUE 


Lu Evi PES ELEU. m É2 


图 10-22 “检查 插件 ”对 话 框 


(3) 对 该 对 话 框 各 个 选项 进行 设置 。 该 对 话 框 中 各 个 选项 的 功能 分 别 介 绍 如 下 : 

e “选择 ”: 选择 宕 要 检查 的 插件 。 

e "AX: 输入 插件 的 类 型 。 

@“ 如 采 有 ， 转 到 URL”: 如 果 找 到 前 和 面 设置 的 插件 类 型 ， 则 跳 转 到 后 和 面 文本 框 中 设 定 

的 网 页 。 

@“ 厂 则 ， 转 到 URL”: 如 采 没 有 找到 前 面 设 置 的 插件 类 型 ， 则 跳 转 到 后 面 文本 框 中 设 

定 的 网 页 。 硅 要 让 不 上 共有 该 插件 的 访问 者 留 在 同一 页 上 ， 则 将 此 域 留 空 。 

e “如 果 无 法 检测 ， 则 始终 转 到 第 一 个 URL”: 如 果 不 能 进行 检查 插件 ， 则 跳 转 到 第 一 

个 URL 地 址 设 定 的 网 页 。 

Macintosh 上 的 Internet Explorer 中 不 能 实现 插件 检测 。Windows 上 的 Internet 
Explorer 中 也 检测 不 到 大 多 数 插件 。 因 此 , 此 选项 只 适用 于 Internet Explorer; Netscape 
Navigator 总 是 可 以 检测 到 插件 。 

(4) 设置 完毕 ， 单 击 “ 确 定 ” 按 钮 ， 然 后 为 动作 选择 所 需 的 事件 。 


[10. 5. 9 检查 表单 


“ 检 奉 表单 ”动作 检查 指定 文本 域 的 内 容 以 确 你 用 户 输入 了 正确 的 数据 闫 型 。 使 用 
onBlur 事 件 将 此 动作 附加 到 单个 文本 域 ， 在 用 户 填 号 表 单 时 对 表单 对 象 的 值 进 行人 检查 ; 或 
使 用 onSubmit 事 件 将 其 附加 到 表单 ， 在 用 户 单 击 “ 确 定 ” 投 钮 时 ， 同 时 对 多 个 文本 域 进行 
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检查 。 将 此 动作 附加 到 表单 , 防止 表单 提交 到 服务 器 后 任何 指定 的 文本 域 包含 无 效 的 数据 。 
下 面 通过 一 个 简单 例子 演示 使 用 “检查 表单 ”动作 的 一 般 步 又 。 
01 上 有 打开 一 个 含有 表单 的 HTML 页 面 ， 选 中 表单 ， 并 打开 “行为 ”面板 。 
029 单 击 “ 行 为 ”面板 上 的 加 号 (+) 按钮 ， 从 弹出 菜单 中 执行 “检查 表单 ”命令 ， 
打开 如 图 10-23 所 示 的 “ 检 醋 表单 ”对 话 框 。 
e “ 域 ”: 在 列表 框 中 列 出 可 用 的 所 有 域名 供 选择 设置 。 
@“ 必 需 的 ”: 表单 对 象 必须 填 有 内 容 ， 不 能 为 空 。 
@ “任何 东西 ”: 表单 对 象 是 必需 的 ， 但 不 需要 包含 任何 特定 类 型 的 数据 。 
如 果 没 有 选择 “必需 的 ”选项 , 则 该 选项 就 无 意义 了 , 也 就 是 说 它 与 该 域 上 未 附加 “ 检 
查 表单 ”动作 一 样 。 
@“ 数 字 ”: 检查 该 域 是 否 只 包含 数字 。 
@“ 电 子 邮 件 地 址 ”: 检查 该 表单 对 象 内 是 否 包含 一 个 @ 符号 。 
@ “数字 从 ”: 表单 对 象 内 具 能 输入 指定 范围 的 数字 。 
03 上 在“ 域 ”中 选中 password， 然 后 勾 选 “必需 的 ”， 并 在 “可 接受 ”区 域 选 择 “ 任 
何 东 西 ” 选 项 。 
04 在 “ 域 ”中 选择 year， 然 后 勾 选 “必需 的 ”， 并 在 “可 接受 ”区 域 选中 “数字 
MAU, $5 2jg1900—2007. 
05 在 “ 域 ” 中 选择 day， 然后 色 选 “必需 的 ”， 并 在 “可 接受 ”区 域 选中 “数字 从 ”， 
范围 为 1 一 31。 
06 在 “ 域 ”中 选择 idcard， 然 后 勾 选 “必需 的 ”， 并 在 “可 接受 ”区 域 选中 “ 数 


7 mura 


t : 
07 贞 在 “ 域 ” 中 选择 text， 然 后 勺 选 “ 必 需 的 ”， 并 在 “可 接受 ”区 域 选 中 “任何 
东西 ”选项 。 
08. 单 击 “确定 ” 关 财 对 话 框 。 然 后 保存 文档 , 在 浏览 紫 中 预 帘 页 面 效 来 。 如 图 10-24 
Bra. 


Q dpt Bii [testbondi ooo 
: XE ”编辑 ([E) ”查看 (WW 收藏 (入 ”快捷 组 (6) 选项 (Co) 工具 (窗口 (帮助 (由 ” 冤 游 网 址 (NJ) 


(age elsH]a.8/6 x Ne 


| 地 址 9) http:/localhost/form.html gau:- 
密码 : 
Eee ee (| ||  — 
HA 日 期 : Microsoft Internet Explorer [^] 
证 码 > ? The following error(s) occurred: 
: i , : - password is required. euin Xm 
&enm 9 2m. Se 
- idcar i r. 
Wwe 
Ls Win 
wan 
(8. 
不 :| (RCI 
nues fries ID SAL 
愿意 其 他 人 可 以 搜索 到 我 的 如 下 信息 ,: v 姓名 ,联系 方式 
qUEBDPELASI fe »i 他 已 登记 的 信息 
| 确定 | ER J z 
o]f&tE ctrl 阻止 本 页 的 消息 框 EEE) 80.0.33.218 — 0 字 节 . 7, 
. 、 S P 入 
图 10-23 “检查 表单 ”对 话 框 图 10-24 “检查 表单 ”行为 的 效果 


如 果 “ 密 码 ” 域 为 空 ， 出 生日 期 的 “年 ”不 在 1900~2007 之 间 ，“ 日 ”不 是 1~31 间 
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的 数字 ; 身份 证 号 个 不 是 全 为 数字 ， 则 提交 表单 时 ， 会 弹出 一 个 敬告 对 话 框 ， 列 出 所 有 和 鲁 
误 的 信息 ， 并 取消 提交 表单 。 

在 Dreamweaver CS5 中 ， 利 用 Adobe 预 制 的 表单 验证 组 件 ， 如 Spry 验 证 文本 域 、Spry 验 
证 复 选 杠 、Spry 验 证 选择 等 构件 ， 狐 手 或 是 对 编程 提 不 起 兴趣 的 用 户 也 可 轻松 快捷 地 检查 
表单 ， 构 建 AJAX 页 面 。 


LL I10.5. 10 设置 文本 


“设置 文本 ”动作 可 以 动态 设置 框 淋 、 容 句 、 状 态 栏 、 文 本 域 中 的 内 容 。 它 有 4 个 子 
麻 里 ， 分 别 对 应 看 4 种 切换 方式 。 下 面 分 别 进行 说 明 。 
1. WELT aT] XC AN 
"YE IOC" TALI oer voti ERJSUE Eas CB, nTEUELES SCA BECTIBZU ZR 
FHEEfIZUERO HU PEU ETTA REM, CETRPLEERBURTE, CLAU ,. fExETAB 
发 事件 触发 后 在 茶 一 个 窗口 中 显示 新 的 内 容 ， 该 内 容 可 以 包括 任何 有 效 的 HTML. 源 代 码 。 
下 面 通过 一 个 简单 实例 演示 使 用 “设置 容 吉 的 文本 ”动作 的 一 般 步 又 。 
0 己 选 择 一 个 容 需 对 象 ， 例 如 上 例 中 的 AP 元 妹 apDiv1， 并 打开 “行为 ”面板 。 
02 旧 单 击 “ 行 为 ”面板 上 的 加 号 《+) 按钮 ， 并 从 动作 弹出 式 荣 单 中 执行 “设置 文本 ” 
/“ 设 置 容 紫 的 文本 ”命令 ， 弹 出 “设置 容 如 的 文本 ”对 话 框 ， 如 图 10-25 所 示 。 


设置 容器 的 文本 Q 
sm 
新 建 HTML: mn 
SERO QD 


图 10-25 “设置 容器 的 文本 ”对 话 框 


03. 在 “容器 ”下 拉 列 表 中 选择 内 容 要 进行 动态 变化 的 容器 。 本 例 选 中 div“apDivl”。 
04 在 “ 狐 建 HTML” 域 中 设置 要 在 当前 容器 中 新 加 入 的 内 容 。 本 例 输入 《<font size=4 
color=yellow> 这 是 一 个 设置 了 导航 栏 图 像 的 AP 元 素 !《/font>。 

在 该 文本 框 中 可 输入 任何 有 效 的 了 ML 语句 、JavaScript 函数 调用 、 属 性 、 全 局 变量 
或 其 他 表达 式 , 这 些 内 容 将 代 蔡 原来 该 容器 中 的 内 容 。 符 要 仍 入 一 个 JavaScript 表达 式 ， 
应 将 其 放置 在 大 括号 〈 士 ) 中 。 帮 要 显示 大 括号 ， 则 在 它 前 面 加 一 个 反 斜 枉 (OD 。 这 个 
规则 也 同样 适用 于 其 余 3 种 文本 类 动作 。 

05) 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 ， 并 在 “行为 ”面板 上 为 动作 选择 所 需 的 事件 。 本 
例 选 择 onMouseOver。 
06. 保存 文档 。 在 浏览 右 中 预览 页 面 效 末 ， 如 岁 10-26 所 示 。 

当 把 鼠标 移 到 AP 元 率 所 在 的 区 域 时 ， 导 航 栏 图 像 变 为 指定 的 文本 ， 并 以 指定 的 大 小 和 
颜色 显示 。 

2. 设置 文本 域 文学 

“设置 文本 域 文学 ”动作 可 以 动态 地 更 改 文 本 域 中 的 内 容 。 例 如 ， 单 击 一 个 图 像 或 授 
钮 ， 其 指定 的 文本 域 的 内 容 发 生 了 改变 。 使 用 本 行为 之 前 必须 先 插 入 文本 域 表 单 对 象 。 

下 面 通过 一 个 简单 例子 演示 “设置 文本 域 文 学 ”的 一 般 使 用 步 又 。 
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r E 
名 无 标题 文档 - 做 游 [Maxthon] QO@ 口 无 标题 文 省 -化 游 Imaxthm QQ@ 
: XE) ”编辑 (E) ”查看 ( 几 ”收藏 (和 ”快捷 组 (6) ”选项 QQ) TRO . AXE swim) ”查看 (WD 收藏 (如 ”快捷 组 (6) ”选项 Q) IR 
: 地 址 学] http:jjlocalhost/ 导 航 栏 图 你 ,html o M : 地 址 9] http:jjlocalhosti 导 航 栏 图 像 .html o Lj 


E 


10-26 “设置 容 右 的 文本 ”动作 的 效果 


201. 新建 一 个 HTML 文 档 。 在 文档 中 插入 一 张 表 单 和 一 个 文本 域 ， 并 在 属性 面板 上 将 
文本 域 命名 为 textfield; 再 插入 一 张 图 片 。 选 中 图 片 ， 并 打开 “行为 ”面板 。 此 时 的 页 
面 效果 如 图 10-27 所 示 。 

Q) 无 标题 文档 - Gli [Maxthon] EX< 


. XFHE Sei 查看 ( 收藏 (名 ”快捷 组 C758 
:地址 “全 ] http:jiliocalhostj 设 置 文本 .html 。 IQ EX 7 


这 里 ， IMerry Christmas'^O | 
看 这 Merry Christmas"^O | 


: - : 1 tri - 
> po imeEtreed [k |) Q 288 x 1. Q 欢迎 使 用 做 游 浏览 器 (Maxthon), 以 下 小 贴 十 将 。 (8) 0.9. 


110-27 初始 页 面 效 琳 图 10-28 “设置 文本 域 ” 动 作 的 效果 


02. 单 击 “ 行 为 ”面板 上 的 加 号 OO 按钮， 在 弹出 的 行为 表单 中 选择 “设置 文本 ” 
/“ 设 置 文本 域 文字 ”行为 ， 打 开 如 图 10-28 所 示 的 “设置 文本 域 文学 ”对 话 框 。 
03 9 在 “文本 域 ” 中 选中 内 容 将 动态 变化 的 文本 域 。 本 例 选 中 input “textfield”。 
04 在 “新 建文 本 ”文本 域 中 输入 将 在 文本 域 中 显示 的 内 容 。 本 例 输入 Merry 
Christmas* 0 *。 
05 9 蛙 击 “人 确定 ”按钮 天 闭 对话 框 ， 并 在 “行为 ”和 面板 上 设置 触发 该 动作 有 的 事件 。 本 
例 使 用 默认 事件 onClick。 
-06. 保存 文档 。 并 按 下 F12 键 预览 效果 。 如 图 10-29 所 示 。 单 击 图 片 ， 文 本 域 中 将 显 
示 指 定 的 Merry Christmas* 0 *。 
3. 设置 框架 文本 
“设置 框架 文本 ”行为 用 于 设置 框 染 内 容 的 动态 变化 ， 可 以 动态 地 蔡 换 一 个 框架 的 
<body》 标记 内 的 全 部 代码 文本 。 
下 面 通过 一 个 简单 的 例子 演示 使 用 “设置 框架 文本 ”动作 的 一 般 步 又 。 
01. 新 建 一 个 HTML 文 档 。 单 击 “ 布 局 ”面板 上 的 四 图 标 ， 插 入 一 个 框架 集 ， 并 在 框 
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架 中 输入 内 容 。 

02. 单 击 “ 文 档 ” 窗 口 左下 角 的 4body> 标 记 ， 并 打开 “行为 ”面板 。 单 击 “ 行 为 ” 
面板 上 的 加 号 (+) 按钮 ， 并 从 动作 弹出 式 菜单 中 执行 “设置 文本 ”/“ 设 置 框架 文本 ” 命 
令 ， 弹 出 如 图 10-30 捷 示 的 “设置 框架 文本 ”对 话 框 。 


| 设置 六 本 域 文字 o 站 a 
— | Wo] 
文本 域 : E Lr 
新 建文 本 : wm" "mo 
&Rh Q0 
mppamxmw v GSZWUE6 
图 10-29 “设置 文本 域 文字 ”对 话 框 图 10-30 “设置 框架 文本 ”对 话 框 


03 9 在 “框架 ”下 拉 有 末 蛙 中 选择 内 容 将 动态 变化 的 框架 。 本 例 选 择 topFrame。 

04 月 在“ 新建 HIML” 文 本 域 中 输入 任何 的 HTML 语 名 以 及 JavaScript 人 代码。 本 例 输入 
JavaScript 语 句 : 今天 是 {new Date 0}。 

05 | 单 击 “获取 当前 HTML” 按 钮 ， 则 当前 框架 的 内 容 会 以 HTML 代 码 的 形式 显示 在 “ 狐 
建 HTML” 文 本 域 中 。 本 例 不 单 击 该 按钮 。 

06 选中 “保留 背景 色 ” 复 选 框 ， 则 保留 该 框架 以 前 设置 的 背景 闫 色 和 文本 闫 色 。 
本 例 选 中 此 项 。 

07. 单 击 “ 确 定 ” 投 钮 关 财 对 话 框 ， 然 后 在 “行为 ”面板 上 为 该 动作 指定 触发 的 事 
件 。 本 例 使 用 默认 事件 onMouseOver。 

08. 保存 文档 。 在 浏览 器 中 预 多 页 面 效 果 ， 如 图 10-31 所 示 。 当 把 限 标 移 人 到 topframe 
区 域 时 ， 该 框架 中 的 内 容 将 被 指定 的 JavaScript 代 人 码 执行 的 结果 巷 换 。 


r r 

Q 无 标题 立 档 - KE [Maxthon] OO Q 无 标题 文档 - 做 游 [Marthon] ooo 
AXE) ”编辑 EE) ”查看 (四 ”收藏 (名 UERBO D XR) ”编辑 [E) ”查看 (四 ”收藏 (名 ”快捷 组 6) D? 
地 址 ^9] file://C:/Inetpubwwwroot/ s Ete IO M 地 址 总] fie:WCWInetpubjwwwroob/ 设 置 框 东风 


今天 是 Wed Dec 26 11:50:46 UTC+0800 
2007 


LefFrame  MamnFrame LefFrame  MamnFrame 


图 10-31 “设置 框架 文本 ”行为 的 效果 


4. 设置 状态 栏 文本 

“设置 状态 栏 文本 ”行为 用 于 设置 浏览 器 窗口 状态 栏 显示 的 信息 。 在 默认 情况 下 ， 当 
浏览 者 在 浏览 过 程 中 将 鼠标 移动 到 超 链接 上 时 ， 在 状态 栏 中 显示 的 是 链接 的 地 址 。 使 用 这 
个 动作 可 以 改变 这 种 默认 设置 ， 使 网 页 更 加 丰富 多 彩 、 吸 引 更 多 的 访问 者 。 

“设置 状态 栏 文本 ”动作 与 “弹出 信息 ”动作 的 作用 很 相似 , 不 同 的 是 ， 如 果 使 用 “ 弹 
出 消息 ”动作 显示 文本 ,访问 者 必须 单 击 “确定 ”按钮 后 才 可 以 继续 浏览 网 页 中 的 内 容 。 
而 在 状态 栏 中 显示 的 文本 信息 不 会 影响 访问 者 的 浏览 。 

使 用 “设置 状态 栏 文本 ”动作 的 步骤 如 下 : 

(1) 选择 一 个 页 面 对 象 ， 并 打开 “行为 ”面板 。 
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2) 单 击 “ 行 为 ”面板 上 的 加 号 〈+) 按钮 ， 并 从 动作 弹出 式 菜 单 中 执行 “ 设 痢 文 本 ” 
/“ 设 置 状 态 栏 文本 ”命令 ， 弹 出 如 图 10-32 所 示 “ 设 置 状 态 栏 文本 ”对 话 框 。 
a 


- 
设置 状态 栏 文本 
消息 : | 
注意 : 并 非 所 有 浏览 器 都 支持 更 改 状态 栏 文本 ， 某 些 训 览 取消 
器 会 根据 用 户 首选 参数 来 确定 征 备 允许 此 动能 。 
帮助 QD 


图 10-32 “设置 状态 栏 文本 ”对 话 框 


(3) 将 需要 在 状态 栏 中 显示 的 信息 输入 到 “消息 ”文本 框 中 ， 
(4) 单 击 “ 确 定 ”按钮 ， 然 后 为 动作 选择 触发 的 事件 ， 


Li0. 5. 11 调用 JavaScript 


JavaScript 是 一 种 描述 性 的 语言 ， 可 以 被 从 入 到 HTML 文 件 中 。 通 过 使 用 JavaScript， 
可 以 响应 用 户 的 需求 事件 ， 而 不 用 任何 的 网 络 途 径 来 回 传输 资料 。Dreamweaver CS5 中 的 
行为 和 AJAX 框 架 Spry 束 是 将 JavaScript 代 码 放置 在 文档 中 ， 以 允许 访问 者 与 Web 页 进行 交 
互 ， 从 而 以 多 种 方式 更 改 页 面 或 引起 某 些 任务 的 执行 。 

“调用 JavaScript” 动 作 束 是 当 发 生 菏 个 事件 时 执行 预先 编写 好 的 一 个 JavaScript 略 | 
数 或 者 一 行 JavaScript 代 人 码 。JavaScript 代 人 码 可 以 是 用 户 目 己 编写 或 使 用 Web 上 多 个 免费 
的 JavaScript 库 中 提供 的 代码 。 

“调用 JavaScript” 动 作 的 使 用 方法 很 简单 。 例 如 ， 选 中 一 段 衬 链 接 的 文本 ， 然 后 

从 “行为 ”下 拉 有 玉 单 中 选择 “调用 JavaScript” 命 令 ， 在 弹出 的 “调用 JavaScript” 对 话 
框 中 输入 如 下 内 容 : 

alert 您 好 ! xut HH 网 球 俱 乐 部 !“) 

当 按 下 F12 键 在 浏览 右 中 进行 测试 时 ， 触发 指定 的 动作 ， 即 会 弹出 提示 窗口 ， 显 示 “ 您 
好 ! 欢迎 光临 班 网 球 俱乐部 ! ^. 
注意 : 如 果 应 用 该 行为 时 没有 选择 对 象 ， 则 将 动作 应 用 到 《<body>》 标 签 。 


[L]10. 5. 12 转 到 URL 


“ 转 到 URL” 行 为 的 网 页 满足 特定 的 触发 事件 时 ， 会 跳 转 到 特定 的 URL 地 址 ， 并 显示 指 
定 的 网 页 。 

使 用 “ 转 到 URL” 动 作 的 步骤 如 下 : 

(1) 选择 一 个 页 面 对 象 ， 并 打开 “行为 ”面板 。 

(20 单 击 “ 行 为 ”面板 上 的 加 号 CO 按钮 ， 并 从 动作 弹出 式 菜单 中 执行 “ 转 到 URL” 
命令 ， 弹 出 “ 转 到 URL” 对 话 框 ， 如 图 10-33 上 所 示 。 

(3) 在 “打开 在 ”区 域 选择 网 页 打开 的 窗口 。 

默认 窗口 为 “ 主 窗口 ”， 即 浏览 器 的 主 窗口 。 若 正在 编辑 的 网 页 中 使 用 了 框架 技术 ， 
即 有 多 个 窗口 ， 则 每 个 窗口 的 名 称 将 在 “打开 在 ”列表 框 中 ， 从 该 列表 框 可 选择 在 哪个 窗 
口中 打开 网 页 。 
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注意 : 如 果 将 框架 命名 为 top. blank. self 或 parent， 则 此 动作 可 能 产生 意 想 不 到 的 结果 。 浏 览 器 有 
时 将 这 些 名 称 误 认 为 保留 的 目标 名 称 。 设 置 对 话 框 中 各 个 选项 。 


图 10-33 “ 转 到 URL” 对 话 框 


(4) 在 “URL” 文 本 框 中 输入 要 打开 的 网 页 地 址 ;或 单 击 “ 浏 览 ” 按 钮 定位 到 需要 的 
DS 
(50 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 然 后 为 动作 选择 触发 事件 。 


[Dj10. 5. 13 预先 载 入 图 像 


经 党 在 网 上 浏览 的 用 户 ， 如 果 使 用 的 是 一 般 的 Modem 上 网 ， 感 受 最 深 的 当然 是 显示 图 
像 时 的 漫长 等 每 。 利 用 Dreamweaver CS5 目 带 的 “预先 载 入 图 像 ” 动 作 ， 可 以 使 图 像 的 下 
载 时 间 明 显 加 快 ， 有 效 地 防止 图 像 由 于 下 载 速 度 导 致 的 显示 延迟 。 

(1) 选择 一 个 对 象 ， 并 打开 行为 面板 。 

(2) 单 击 行为 面板 上 的 加 号 (+) 按钮 并 从 动作 弹出 式 染 单 中 执行 “预先 载 入 图 像 ” 
命令 ， 弹 出 “预先 载 入 图 像 ” 对 话 框 ， 如 图 10-34 所 示 。 


rre @ 
95 | 确定 | 
RCANNGIMO o — —] 取消 
才 助 (HY | 
图 类 源 立 件 : ET 


图 10-34 “预先 载 入 图 像 ” 对 话 框 


(3) 单 击 “ 浏 览 ” 按 钮 选择 要 预先 载 入 的 图 像 文件 ， 或 在 “图 像 源 文件 ”文本 框 中 
输入 图 像 的 路 人 笃 和 文件 名 。 

(4) 单 击 对 话 框 项 部 的 加 号 (+) 投 钮 将 图 像 深 加 到 “预先 载 入 几 像 ”列表 中 。 

(5) 对 所 有 剩 下 的 要 预先 载 入 当前 页 的 几 像 重复 第 3 步 和 第 4 步 。 

(60 在 要 从 “预先 载 入 网 像 ”列表 中 删除 东 个 岁 像 ， 请 在 列表 中 选择 该 图 像 ， 然 后 
Hi CO 按钮 。 

(7) 单 击 “ 确 定 ” 按 钮 ， 然 后 为 动作 选择 触发 事件 。 
提示 : 如 果 在 输入 下 一 个 图 像 之 前 没有 单 击 加 号 (+) 按钮 ， 则 列表 中 上 次 选择 的 图 像 将 被 “图 像 源 文件 ” 
AC AREE FG A AN FI] EL ERR 


Dreamweaver CS5 很 有 用 的 功能 之 一 就 是 它 的 扩展 性 ， 即 它 提 供 了 编写 JavaScript 代 
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但 的 机 会 ， 这 些 代 码 可 以 扩展 Dreamweaver 的 功能 。 然 而 要 创建 行为 ， 用 户 必 须 精通 HTML 
和 和 JavaScript 语 言 ， 这 有 很 大 的 难度 。 好 在 网 上 有 许多 可 用 的 第 三 方 行为 供用 户 下 载 。 
奉 要 从 Exchange 站 点 下 载 和 安 关 独 行为， 可 以 执行 以 下 操作 : 

(1) 打开 行为 面板 并 单 击 加 号 +) ， 在 弹出 式 末 单 中 执行 “获取 更 多 行为 ”命令 。 
这 时 会 日 动 启动 浏览 器 ， 连 接 到 Dreamweaver 的 官方 站 点 下 载 行为 。 

(20 下 载 并 解压 缩 所 需 的 行为 扩展 包 。 

(3) 将 解压 的 文件 存 入 Dreamweaver 安装 目录 下 的 Configuration/Behaviors/ 
Actions 文 件 夹 中 。 

(4) 重新 启动 Dreamweaver CS5。 


本 市 将 讲述 使 用 行为 制作 动态 的 导航 图 像 。 初 始 时 ， 导 航 图 片 中 的 文学 为 深 隶 色 或 日 

色 ， 将 鼠标 移 到 导航 图 片上 时 ， 图 厂 中 的 文学 显示 为 桔 黄 色 ， 且 有 阴影 。 制 作 步 又 如 下 : 

01. 打开 保存 的 模板 index. dwt。 在 吐 般 条 中 选中 一 个 导航 项 目 图 片 ， 例 如 “我 的 店 
铺 ”， 在 属性 面板 上 将 其 命名 为 shop。 

02 9 执行 “窗口 ”A/“ 行 为 ” 采 蛙 命令 ， 打开 “行为 ”和 面板 。 单 击 该 面板 左上 角 的 加 
* (+) 按钮 ， 在 弹出 的 行为 下 拉 亲 单 中 选择 “交换 图 像 ” 命 令 ， 弹出 如 图 10-35 所 示 的 “ 交 
换 图 像 ” 对 话 框 。 

03 在“ 图像” 区域 选中 要 湛 加 行为 的 图 片 “shop”， 然 后 单 击 “ 设 定 原 始 档 为 ” 
文本 框 右 侧 的 “ 浏 吃 ” 按 钮 ， 在 打开 的 “选择 文件 ”对 话 框 中 选中 需要 的 图 片 文 件 。 

04 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 此 时 在 “行为 ”面板 中 可 以 看 到 ，Dreamweavet 
目 动 为 选 定 的 岁 片 添加 了 “恢复 交换 图 像 ” 行 为 ， 并 设置 了 相应 的 行为 。 

05 1 同 理 ， 为 其 他 导航 图 片 洪 加 “交换 图 像 ” 行 为 ， 然 后 你 存 文 件 ， 并 按 下 F12 键 在 
浏览 嚣 中 预 搞 页 面 。 如 图 10-36 所 示 。 


Q O6 Der xem e 人 -| 名 [ n 


廊 寺 起) [i] c rct pubblesginedes. Hd 


A QUE TL lh 


图 10-35 “交换 图 像 ” 对 话 框 图 10-36 页面 效果 
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伴随 着 网 络 的 飞速 发 展 ， 网 络 多 媒体 技术 也 日 益 成 
熟 。 网 页 中 除了 可 以 加 入 文本 和 图 片 之 外 , 还 可 以 添加 声 
音 、 视 频 等 多 媒体 ， 从 而 创建 出 丰富 多 彩 的 页 面 效果 、 
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11.1 在 网 页 中 使 用 声音 


对 于 广大 网 页 设计 者 来 说 ， 如 何 能 使 自己 的 网 站 与 众 不 同 、 充 满 个 性 ， 一 直 是 不 
懈 努 力 的 目标 。 除 了 尽量 提高 页 面 的 视觉 效果 、 互 动 功能 以 外 ， 如 果 能 在 打开 网 页 的 
同时 ， 上 听 到 一 曲 优美 动人 的 音乐 ， 相 信和 这 会 使 您 的 网 站 增色 不 少 。 

在 网 页 中 可 以 添加 多 种 次 型 的 声音 文件 格式 ， 如 : .midi 或 .mid、.wav、.aif、. 
mp3、. ra、.Tfamn 和 .rpm 等 ， 不 同类 型 的 声音 文件 和 格式 有 各 目 不 同 的 特点 。 在 确定 添加 的 
声音 文件 的 格式 之 前 ， 用 户 需 要 考虑 一 些 因素 ， 例 如 添加 声音 的 目的 、 受 众 、 文 件 大 小 、 
声音 品质 和 不 同 的 声音 格式 在 不 同 浏览 右 中 的 甜 开 。 


[1.1.1 网 页 中 音频 文件 的 格式 
下 面 简 要 介绍 几 种 第 见 的 音频 文件 格式 以 及 每 一 种 格式 在 Web 设计 上 的 一 些 优 缺 


]. .midi 或 .mid 

MIDI 是 乐器 数学 接口 的 简称 , 顾名思义 , 是 一 种 主要 用 于 器 乐 的 音频 格式 。 很 小 的 MIDI 
文件 也 可 以 提供 较 长 时 间 的 声音 筋 辑 ， 许 多 浏览 器 都 文 持 MIDI 文 件 并 且 不 要 求 插件 。 尽 管 
MIDI 声 普 品 质 非常 好 ， 但 声卡 不 同 ， 声 普 效 来 也 会 有 所 不 同 ， 此 外 ，MIDI 文 件 不 能 被 录制 
并 且 必 须 使 用 特殊 的 便 件 和 软件 在 计算 机 上 合成 。 

2. .Wav 

BlWaveformf&zXOCTr, HUP EB Try VEI VU dab SXCHEJGAS TS SN OCTEIE HA 
SEcKdür. HI RIBJACD. BASE. A v6 E COHUJWAVOCTE,. fHié, URPERGXIDIOCTE 
BA. PRU IXEP v En DLSERIBS S vr BSTARTISHERE 

3. .alf 

音频 交换 文件 格式 ， 即 AIFF。 与 WAV 格 式 关 似 ， 也 具有 民 好 的 声 首 品质 ， 大 多 数 浏览 
颖 都 可 以 不 要 求 插件 地 播放 。 此 外 ， 用 户 还 可 以 从 CD、 磁 市 、 妥 元 风 等 录制 AIFF 文 件 。 与 
WAV 相 似 ，AIFF 格 式 文件 较 大 ， 严 格 限 制 了 在 网 页 上 可 以 使 用 的 声音 瘟 辑 的 长 大。 

4. .ra、 .ram、.rpm 或 Real Audio 

具有 非常 高 的 压缩 程度 ， 且 支持 “ 流 式 处 理 ”， 访问 者 在 文件 完全 下 载 完 之 前 即 可 听 
到 声音 ， 但 声 首 品 质 比 MP3 文 件 要 差 ， 且 访问 者 必须 下 载 并 安 猴 RealPlayer 应 用 程序 或 插 
件 才 可 以 播放 这 些 文件 。 

5. .mp3 

运动 图 像 专家 组 音频 ， 即 MPEG- 音 频 层 -3。 它 是 一 种 压缩 格式 ， 可 以 在 明显 减 小 声音 
文件 大 小 的 同时 保持 非常 好 的 声音 品质 。 如 末 正 确 孙 制 和 压缩 MP3 文 件 ， 其 质量 其 全 可 以 
和 CD 质量 相 媲美 。 这 种 格式 的 文件 大 小 比 Real Audio 格 式 要 大 ， 也 支持 流 式 处 理 ， 即 边 下 
载 边 播放 ， 访 问 者 不 必 等 竺 整个 文件 下 载 完 成 即 可 收听 该 文件 。 奋 要 播放 MP3 文 件 ， 访 问 
者 必须 下 载 并 安 猴 辅助 应 用 程序 或 插件 ， 例 如 QuickTime、Windows Media Player 或 
RealPlayer. 
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[11. 1.2 在 网 页 中 添加 声音 


在 网 页 中 添加 音频 有 多 种 方法 。 本 节 介 绍 两 种 常用 的 方法 。 

1. 链接 到 音频 文件 

链接 到 音频 文件 是 指 将 声音 文件 作为 页 面 上 某 种 元 素 的 超 链接 目标 。 这 种 集成 声音 文 
件 的 方法 可 以 使 访问 者 能 够 选择 是 否 要 收听 该 文件 ， 因 为 只 有 单 击 了 超级 链接 ， 且 用 户 的 
计算 机 上 安 疾 了 相应 的 播放 右 ， 才 能 收听 音乐 文件 。 

下 面 通过 创建 一 个 简单 的 例子 演示 链接 到 音频 文件 的 具体 操作 。 

CIO 新 建 一 个 HTML 文 件 ， 输 入 并 格式 化 文字 。 页 面 效 果 如 图 11-1 所 示 。 

(2) 选中 “1、Careless 了 hisper”， 在 属性 面板 上 的 “链接 ”区 域 单 击 文件 夹 网 标 
找到 需要 的 音频 文件 。 

(3) 同 理 ， 为 其 他 文本 选择 链接 的 音乐 文件 。 

(4) 保存 文件 ， 在 浏览 器 中 预 钨 页 面 效果 。 

单 击 链接 “1、Careless Whisper”， 会 打开 相应 的 媒体 播放 占 播 放 指定 的 首 乐 文件 。 
效果 如 图 11-2 所 示 。 


二 "= 
£ | JLARURGE P - Microsoft Internet Lplorer I I^I*| 
pi 3 xig) fn, Jose reme 45 6-7 


E)5m um" 
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P344 3.4 ET | 
1. Careless WHhisper Vl EE am 
2S.) Yestoday once more d [m ] EX gm mE 
3. | vvant it that vay EE - — 
; | »- | | JFFLE | * à 
LL Lia & 3H Intranet | REM ee fa Es Dar Toa - ES 
图 11-1 JR UA 图 11-2 用 WINAMP 播 放 音 乐 
2. 使 用 插件 


这 种 方法 是 指 将 声音 播放 融 百 接 插 入 页 和 面 中 ， 当 访问 者 计算 机 上 安 疫 有 适当 的 捕 件 
时 ， 声 音 即 可 播放 。 这 种 方法 常用 于 在 网 页 上 添加 背景 音乐 。 当 然 ， 这 种 方式 也 文 持 用 户 
对 声音 播放 进行 控制 。 

使 用 插件 播放 声音 的 一 般 操 作 步 又 如 下 : 

(1) 在 设计 视图 中 ， 将 插入 点 放置 在 要 欣 入 插件 的 地 方 。 

(20 执行 “插入 ”/“ 媒 体 ”/“ 插 件 ” 命 令 ， 或 者 单 击 “ 常 用 ”面板 中 的 图 标 怨 ”， 
在 弹出 的 下 拉 沫 单 中 单 击 “ 插 件 ”。 

(3) 在 弹出 的 “选择 文件 ”对 话 框 中 选择 要 播放 的 声音 文件 ， 然 后 单 击 “ 确 定 ” 鬼 
&l. 

(4) 在 属性 检查 右 中 ， 单 击 “ 参 数 ” 按 钮 ， 弹 出 如 图 11-3 所 示 的 参数 设置 对 话 框 。 

(5) 单 击 对 话 框 上 的 “十 ”按钮 ， 在 “参数 ” 列 中 输入 参数 的 名 称 。 在 “ 值 ” 列 中 
输入 该 参数 的 值 。 输 入 完毕 后 ， 单 击 “确定 ”按钮 。 

(60 执行 “文件 ”/ “保存 ”命令 ， 保 存 文档 。 
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图 11-3 ”参数 设置 对 话 框 


[1.1.3 实例 制作 之 背景 音乐 


本 节 将 为 “伊人 风尚 ”的 链接 目标 ， 即 photo. html 文 件 添加 背景 音乐 。 步 又 如 下 : 

01 打开 已 制作 的 photo. html. 

02 在 “设计 ”视图 中 ， 将 插入 点 放置 在 要 骸 入 文件 的 地 方 ， 如 导航 条 图 标的 下 面 。 
执行 “插入 ”/“ 媒 体 ”/“ 插 件 ” 菜 单 命令 ; 或 者 在 “插入 ”/“ 常 用 ”面板 中 单 击 图 标 便 * 并 人 
中 的 下 拉稀 尖 弹 出 下 拉 采 单 ， 在 下 拉 采 蛙 中 单 击 “插件 ”， 弹 出 “选择 文件 ”对 话 框 。 

03 选择 需要 的 首 乐 文件 follow_your_dream. wma, 蛙 击 “人 确定 ”按钮 插入 首 频 文件 。 

04 在 属性 检查 器 的 “ 宽 ” 和 “局 ”文本 框 中 设置 插件 的 尺寸 在 “ 王 直 边 距 ”和 
“水 平 边 距 ” 文 本 框 中 设置 插件 在 页 面 中 的 位 置 ， 在 “对 齐 ” 下 拉 列 表 中 指定 插件 与 页 面 
中 其 他 对 象 的 相对 位 置 ， 在 “边框 ”文本 框 中 指定 插件 的 边框 厚度 。 

如 果 将 “ 宽 ” 和 “高 ”的 值 均 设置 为 0， 则 可 隐藏 插件 。 本 例 分 别 设置 为 200 和 32。 

05) 单 击 “ 参 数 ” 按 钮 ， 弹 出 如 图 11-3 所 示 的 “参数 ”对 话 框 。 在 “参数 ” 列 中 输入 
参数 的 名 称 “Autostart”。 在 “ 值 ” 列 中 输入 该 参数 的 值 “true”。 

06. 单 击 对 话 框 上 的 加 号 〈 十 ) 按钮 ， 在 “参数 ” 列 中 输入 参数 的 名 称 “Loop”。 在 
“ 值 ” 列 中 输入 该 参数 的 值 “true”。 输 入 完毕 后 ， 单 击 “ 人 确定 ”关闭 对 话 框 。 

如 有 果 不 设 置 Loop 参 数 ， 或 Loop 参 数 的 值 不 为 true， 则 音乐 播放 一 次 后 目 动 停止。 

07 月 执行 “文件 ”/“ 人 保存” 命令， 保存 文档 。 

08. 在 浏览 器 中 预 筑 页 面 ， 打 开 页 面 时 音乐 会 目 动 播放 且 循 环 播 放 。 如 网 11-4 所 示 。 
技巧 : 浏览 需 不同， 处 理 声音 文件 的 方式 也 会 有 很 大 差异 和 不 一 致 的 地 方 。 用 户 最 好 将 声音 文件 添加 到 
Flash && Hr. JAJE HUN SWFE 文件 以 改善 一 致 性 。 

本 实例 中 ， 背 景 音 乐 将 循环 播放 。 浏 览 者 可 以 单 击 播放 上 堪 上 的 控制 按钮 以 控制 背景 音 


欢 池 光临 我 的 小 民 。 
T] r! 村 L. 


; 人 人 风尚 
H $ O6 
图 11-4 实例 效果 图 11-5 隐藏 播放 器 效果 
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09 旧 选中 页 面 中 的 插件 占 位 待 ， 在 属性 面板 上 将 其 宽 和 高 均 设 置 为 0。 或 打开 如 图 
11-3 所 示 的 “参数 ”对 话 框 ， 单 击 加 号 (+) 按钮 ， 在 “参数 ” 列 输入 Hidden， 在 “ 值 ” 
列 输入 “true”。 然 后 单 击 “ 确 定 ” 控 钮 关闭 对 话 框 。 

10 9 你 和 存 文档 。 在 浏览 占 中 预 欠 页 面 效 果 ， 如 图 11-5 所 示 。 

此 时 ， 浏 览 者 无 法 对 背景 音乐 进行 控制 。 


11.2 插入 Flash 对 象 


Flash 技 术 是 实现 和 传递 基于 矢量 的 图 形 和 动画 的 首选 解决 方案 。Flash 播放 器 在 PC 
上 既 可 作为 Netscape Navigator 上 的 插件 ， 也 可 作为 Microsoft Internet Explorer LH 
ActivexX 探 件 ， 此 外 它 还 集成 到 了 Netscape Navigator. Microsoft Internet Explorer^l 
America 0nline 的 最 新 版 本 中 。 

无 论 是 否 具 有 Flash，Dreamweaver 都 附带 了 可 以 使 用 的 Flash 对 象 ， 使 用 这 些 对 象 可 
以 在 Dreamweaver 文档 中 插入 Flash 动 和 夯 和 Flash 视 频 。 
提示 : 在 Dreamweaver CS5 中 ，Adobe 已 拿 掉 了 Flash Zl. Flash 文本 和 Flash 元 素 。 


L111. 2. 1 添加 Flash 动 画 


在 Dreamweaver CS5 中 ， 用 户 可 以 很 方便 地 在 页 面 中 添加 Flash 动 画 。 本 小 节 将 通过 一 
个 实例 演示 在 文档 中 插入 Flash 影 片 的 操作 方法 。 
01 明 新 建 一 个 HITML 文 档 并 保存 。 
029 在 设计 视图 中 ， 将 插入 点 放置 在 要 插入 Flash 动 画 的 地 方 ， 单 击 “ 常 用 ”面板 上 
的 甸 :按钮 ， 在 弹出 的 下 拉 菜 单 中 选择 直 图 标 。 
03. 在 弹出 的 “选择 文件 ”对 话 框 中 选择 需要 的 Flash 动 男 文 件 之 后 ， 单 击 “ 确 定 ” 
按钮 插入 Flash 动 画 。 
插入 的 动画 在 页 面 上 显示 为 一 个 Flash 占 位 符 ， 如 图 11-6 所 示 。 
04 选中 插入 的 影片 占 位 符 ， 在 属性 面板 上 设置 其 大 小 、 播 放 方式 、 对 齐 方 式 和 背 
景 颜色 。 本 例 将 其 居中 对 齐 ， 背 景 颜色 为 白色 ， 其 他 采用 默认 设置 。 如 果 单 击 颜 色 井 中 的 
回 图 标 ， 则 可 使 Flash 背 景 透明 。 
05 骨 单 击 属 性 面板 上 的 “播放 ”按钮 ， 即 可 预览 影片 文件 ， 如 图 11-7 上 所 示 。 


- 
T5») C:netpub'wwwroot'flash.html (XHTML)* (Qy 1 e T5») C:netpub'wwwroot'flash.html (XHTML)* (3 1 e 


T77777^^R SEE EE 1 


L.-T 


body? (k]99 Q 100€ v428 x 288v 1 K / 1 b v?Xmoscript?|Cobiect? [RI Q 100$ v428 x 288v 0 K / 1 dh 


图 11-6 Flash 动 画 的 占 位 符 图 11-7 播放 Flash 动 画 
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Lill. 2. 2 插入 Flash 视 频 


Dreamweaver CS5 文 持 Flash 视频 ， 用 户 只 需要 通过 轻松 点 击 或 编写 符合 标准 的 编 公 
即 可 快速 、 便 捷 地 将 Flash 视频 文件 插入 网 页 ， 而 无 需 使 用 Flash 创作 工具 。 设 计时 ， 
用 户 还 可 以 在 Dreamweaver CS5 的 实时 视图 中 播放 FLV 影 
在 Dreamweaver 页 面 中 插入 Flash 视频 内 容 之 前 ， bit; — 一 个 经 过 编码 的 Flash 视 
频 (FLV) 文件 。 
在 Web 页 中 插入 Flash 视频 的 一 般 步 又 如 下 : 
(1) 选择 “插入 ”/“ 尹 体 ”/ “FLV” 沫 单 命 令 。 弹 出 如 网 11-8 所 示 的 “插入 FLV7” 
Xt 
(2) 在 “插入 FLV” 对 话 框 中 ， 在 “视频 类 型 ”弹出 式 采 单 中 选择 视频 播放 方式 。 
其 中 ，“ 累 进 式 下 载 视频 ”将 Flash 视频 (FLV) 文件 下 载 到 站 点 访问 者 的 硬盘 上 ， 
然后 播放 . 与 传统 的 “下 载 并 播放 ”视频 传送 方法 不 同 ， 累 进 式 下 载 允 许 在 下 载 完 成 之前 
残 开始 播放 视频 文件 。 
“ 流 视频 ”对 Flash 视频 内 容 进 行 流 式 处 理 ， 并 在 一 段 很 短 时 间 的 缓冲 〈 可 确保 流 
畅 播放 ) 之 后 在 Web 页 上 播放 该 内 容 。 
提示 : 大 要 在 网 页 上 局 用 流 视频 ， 必 须 具 有 访问 Adobe Flash Communication Server 的 权限 。 


dA FLV 
视频 类 型 ， [累进 式 下 载 视频 vj 
v: | B... 
( 输入 FLV 文件 的 相对 或 绝对 路 径 ) 
外 观 : Clear Skin 1 ( 景 小 宽度 : 140) m 
> la 只 
宽度 : 限制 高 宽 比 “| EHE 
高 度 : 包括 外 观 : 
口 自动 播放 
口 自动 重新 播放 
v) SEXUS 18 » VETEDI SSss CP TRU D [HT 


图 11-8 “插入 Flash 视 频 ” 对 话 框 


(3) 在 “URL” 文 本 框 中 键入 Flash 视 频 的 相对 路 径 或 绝对 路 径 。 


(40 在 “外 观 ” 下 拉 亲 单 中 指定 Flash 视频 组 件 的 外 观 。 所 选 外 观 的 预览 会 出 现在 
“外 观 ” 弹 出 染 单 下 方 。 

(5) 在 “ 千 度 ”和 “局 上 度 ” 文 本 框 中 以 像 系 为 持 位 指定 FLV XCTEBS WR SCRI ESSE 

(60 蛙 击 “检测 大 小 ”按钮 ，Dreamweaver 可 以 帮助 用 户 确 定 FLV 文件 的 准确 宽度 
或 局 度 。 如 果 Dreamweaver 无 法 确定 宽度 或 高 度 ， 则 用 户 必须 键入 宽度 或 高 度 值 。 

CD 选中 “限制 高 宽 比 ” 复 选 枉 ， 则 保持 Flash 视频 组 件 的 宽度 和 高 度 之 间 的 比例 
JN 蔷 认 情况 下 选择 此 选项 

设置 宽度 、 电 度 和 外 观 后 ， 包括 外 观 ” 后 将 目 动 显示 FLV AXCTEBIS ds BER Ig E 55 Proc 
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外 观 的 宽度 和 高 度 相 加 得 出 的 和 。 

(80 选中 “ 目 动 播放 ” 复 选 枉 ， 则 Web 页 面 打开 时 目 动 播放 视频 。 

(9) 选中 “自动 重新 播放 ” 复 选 枉 ， 则 播放 控件 在 视频 播放 完 之 后 返回 到 起 始 位 置 。 

(100 单 击 “人 确定 ”按钮 天 财 对 话 框 ， 并 将 Flash 视频 内 容 添加 到 Web 页 面 。 

在 Dreamweaver 中 ， 将 Flash 视频 文件 插入 页 面 之 后 ， 可 以 在 页 面 中 插入 有 关 代 码 ， 
以 检测 用 户 是 否 拥 有 得 看 Flash 视频 所 需 的 正确 的 Flash Player 版 本 。 如 果 用 户 没 有 正 
人 确 的 版 本 ， 则 会 提示 用 户 下 载 Flash Player 的 最 独 版 本 。 

“插入 FLV” 命 令 将 生成 一 个 视频 播放 器 SWE 文件 和 一 个 外 观 SWF. 文件， 它们 共同 
用 于 在 Web 页 面 上 显示 Flash 视频 内 容 。 这 些 文件 与 Flash 视频 内 容 所 添加 到 的 HTML 
文件 存储 在 同一 目录 中 。 当 上 传 包含 Flash 视频 内 容 的 HTML 页 面 时 ，Dreamweaver 将 
以 相关 文件 的 形式 上 传 这 些 文件 。 

插入 Flash 视 频 之 后 ， 在 “文档 ”窗口 中 单 击 Flash 视频 组 件 占 位 符 ， 可 以 打开 如 疼 
11-9 所 示 的 属性 检查 器 更 改 Flash 视 频 的 一 些 属性 。 


Bd. i: 去 
| mag] Flash 视频 | X» 300 v. 限制 高 宽 比 | 重 舍 | 文件 这 才 0 唱 歌 . 日 v o 类 人 ) [无 Z 
上 FLVPlaver || 高 400 包括 外 观 : 300x400 外 观 [Clear Skin 1 (最小 宽度 : 140) 此 
” 自动 播放 
自动 重新 播放 


图 11-9 ”Flash 视 频 的 属性 面板 
该 属性 检查 器 中 的 选项 与 “搬入 FLV” 对 话 框 中 的 选项 类 似 ， 在 此 不 再 葡 述 。 


注意 : 使 用 属性 检查 器 不 能 更 改 视频 的 类 型 (例如 ， 从 “累进 式 下 载 ” 更 改 为 “ 流 式 ”) 。 寿 要 更 改 视 
频 关 型 ， 必 须 删 除 Flash 视频 组 件 ， 然 后 通过 选择 “插入 ”/“ 媒 体 ”/“FLV” 命 令 重 狐 插 入 Flash T 

如 下 要 从 页 面 中 删除 Flash 视频 ， 则 不 再 需要 检测 代码 ， 可 以 使 用 “命令 ”/“ 删 
除 FLV 检 测 ” 荣 单 命令 删除 检测 代码 ， 然 后 选中 Flash 视 频 占 位 符 ， 投 Delete 键 将 其 删除 。 


11.3 插入 其 他 多 媒体 对 象 


在 Dreamweaver CS5 中 ， 除 了 能 在 网 页 中 插入 声音 、Flash 动 男 和 Flash 视 频 等 多 媒体 
元 素 之 外 ， 还 可 以 插入 APPLET、ActiveX 控 件 、Shockwave 电 影 等 多 媒体 对 象 。 此 外 ， 用 户 
还 可 以 在 Adobe 的 插件 下 载 中心 下 载 插件 ， 从 而 以 可 视 化 方式 轻松 地 插入 其 他 类 型 的 视频 
或 多 媒体 元 厅 ， 如 RealMedia、VWindows Media、QuickTime 等 。 


D1. 3. 1 插入 APPLET 


Applets 是 通过 编程 语言 Java 开 发 的 可 能 入 网 页 中 的 小 型 应 用 程序 。 在 创建 了 Java 
applets 之 后 ， 可 以 使 用 Dreamweaver 将 其 插入 HTML 文 档 中 。Dreamweaver 使 用 applet 标 记 
来 标记 对 此 applets 文 件 的 引用 。 

下 和 而 通过 一 个 实例 演示 在 文档 中 插入 Java applets 的 一 般 操作 步骤 。 
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01. 新 建 一 个 HTML 文档 。 在 “设计 ”视图 中 ， 将 插入 点 放置 在 要 插入 applets 控 件 的 
位 置 。 

02. 执行 “插入 ”/ "RUE" / "Applet" 3E S; 或 者 在 “插入 ” 栏 中 ， 油 活 “第 
用 ”面板 ， 然 后 单 击 图 标 午 :弹出 下 拉 菜 单 ， d Fk p ud ome ; 打开 “选择 文件 ” 
对 话 框 。 

03. 在 弹出 的 对 话 框 中 选择 包含 Java applets 的 文件 Clock2. class。 单 击 “确定 ” 
按钮 关闭 对 话 框 。 

04 贞 在 “设计 ”视图 中 , 选中 插入 的 applet 占 位 符 ， 打 开 如 图 11-10 所 示 的 属性 面板 。 
在 “ 宽 ” 和 “高 ”中 分 别 输入 180 和 32。 


尾 性 
a». Appletzádi, 3€ Q0 32 f6R3 (C) Clock2. class (Cz 对 齐 QD | 默认 值 m 25 (C) > 
| -— E032 |] 基 址 上 @) tH CD - - 
a& BB 局) 
AGE ZB (8) D 


图 11-10 Java applets 控件 的 属性 


05 在 “Applet 名 称 ” 文 本 框 中 输入 用 于 标识 applets 以 进行 脚本 撰写 的 名 称 。 
06 “代码 ”文本 框 中 自动 填充 已 插入 的 含有 Java applets 的 文件 名 称 Clock2. class. 
早 击 文件 夹 图 标 可 以 浏览 到 某 一 文件 ， 或 者 直接 输入 文件 名 。 
07 肯 在 “ 基 址 ”文本 框 中 指定 包含 选 定 applets 的 文件 夹 。 在 选择 了 一 个 applets 后 ， 
此 域 被 日 动 填充 。 
08 上 单 击 “参数 ”按钮 ， 可 以 打开 如 图 11-3 所 示 的 “参数 ”对 话 杠 ， 用 于 为 applet 
设置 控制 参数 。 本 例 不 作 设 置 。 
09 月 在 “垂直 边 距 ”和 “水 平 边 距 ” 文 本 框 中 设置 applet 在 页 面 中 的 位 置 。 
10 肯 在“ 对齐” 下 拉 列 表 中 指定 applet 与 页 面 中 其 他 元 素 的 相对 位 置 。 
11 虽 在 “ 蔡 换 ”文本 框 中 指定 在 用 户 的 浏览 器 不 文 持 Java applet 或 者 已 禁用 Java 
时 要 显示 的 符 代 内 容 。 本 例 保 留 默 认 议 置 。 
该 项 通常 为 一 个 图 人像 。 如 果 输 入 文本 ，Dreamweaver 会 插入 这 些 文 本 ， 并 将 它们 作为 
applet 的 alt 属性 的 值 。 
至 此 ， 文 档 创建 完毕 。 
12 具 保存 文档 ， (EIL T 预览 整个 页 面 ， 效 末 如 图 11-11 所 示 。 


| Q 无 标题 交 档 - 做 游 IMaxthon] ood 
文件 (F) | 编辑 (E) | 查看 (yw) | CONES C CENE 


DHleleolsH adler 


地 址 9 )http://localhost/Applets.html Lv] z 


Thu, December 2T 11:13:45 


2342 x 201 i) o 5 


图 11-11 实例 效果 
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Lil1. 3. 2 添加 ActiveX 控 件 


目 从 Microsoft 公 司 于 1996 年 推出 ActiveX 技 术 以 来 ，ActiveX 技 术 已 得 到 了 许多 软件 
公司 的 支持 和 响应 ， 并 纷纷 在 其 产品 中 融入 ActiveX 技 术 ， 而 作为 ActiveX 技 术 之 一 的 
Activex 控 件 也 得 到 了 迅 狐 的 发 展 。 

什么 是 ActiveX 探 件 呢 ? ActivexX 探 件 的 前 号 驶 是 0OLE 控 件 ， 是 可 以 充当 浏览 器 插件 的 
可 重复 使 用 的 组 件 ， 类 似 微型 的 应 用 程序 。 由 于 ActiveX 控 件 与 开发 平台 无 关 ， 因 此 ， 通 
过 使 用 ActivexX 探 件 即 可 快速 实现 组 件 重用 、 实 现代 码 共 享 ， 从 而 提高 编程 效率 。 

下 面 通 过 一 个 简单 实例 演示 在 文档 中 插入 ActiveX 控 件 的 具体 操作 步 又 。 

01 在 “设计 ”视图 中 ， 将 插入 点 放置 在 要 插入 ActiveX 探 件 的 位 置 。 

02 朋 执行 “插入 ”/“ 媒 体 ”/“ActiveX” 菜 单 命令 ; 或 者 在 “常用 ”面板 中 单 击 图 
标 盏 -弹出 下 拉 菜 单 ， 在 下 拉 菜 单 中 单 击 蕊 “az ， 插 入 ActiveX 控 件 。 

同 插入 其 他 对 象 不 同 ， 插 入 ActiveX 控 件 时 不 会 出 现 对 话 框 ， 而 是 直接 在 文档 窗口 中 
添加 一 个 ActiveX 控 件 占 位 符 ， 如 图 11-12 所 示 。 


图 11-12 ActiveX 控件 的 占 位 符 
03 旧 选中 ActivexX 控 件 属性 面板 上 的 “ 藤 入 ” 复 选 枉 ， 如 图 11-13 所 示 。 单 击 “ 源 文 
件 ” 右 边 文件 夹 图 标 ， 弹 出 “选择 NetScape 搬 件 文件 ”对 话 框 。 


zt [ER 


Ed Activel X032 — assID() [w]- xtrG[SUm ”|x| 3$ 
acci E0032 — A (o 口 源 文 件 GO 

3EEUNIB (Y) 基 址 (B) 

水 平 边 距 q I» 数据 Q) EHAEIIS CD) a 


图 11-13 J3erpSTEBIH LBS "CN ERSTE 

选中 “ 租 入 ” 复 选 框 可 以 为 该 ActiveX 控件 在 object 标记 内 添加 embed 标记 。 如 果 
ActiveX 探 件 具 有 等 效 的 Netscape Navigator 插 件 , 则 embed 标记 激活 该 插件 .Dreamweavet 
将 ActiveX 属性 的 值 指派 给 等 效 的 Netscape Navigator 插件 。 

局 用 了 “ 纵 入 ”选项 之 后 ，“ 源 文件 ”区 域 变 为 可 用 ， 用 户 在 这 里 可 以 指定 将 要 用 于 
Netscape Navigator 插件 的 数据 文件 。 如 果 没 有 输入 值 ， 则 Dreamweaver 将 尝试 根据 已 输 
入 的 ActiveX 属性 确定 该 值 。 

04 骨 在 对 话 框 中 选择 一 个 插件 文件 。 单 击 “ 确 定 ” 按 钮 插入 文件 。 

05 在 “ActiveX” 文 本 框 中 输入 名 称 。 该 名 称 在 进行 脚本 撰写 时 ， 用 于 标识 ActiveX 
控件 。 

06 fF "Class ID” 文 本 框 中 输入 一 个 值 ， 或 从 弹出 式 采 单 中 选择 一 个 值 ， 用 于 为 
浏览 器 标识 ActiveX 控 件 的 位 置 。 

在 加 载 页 面 时 ， 浏 览 器 使 用 该 类 ID 来 确定 与 该 页 面 关 联 的 ActiveX 控 件 的 位 置 。 如 果 
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浏览 器 未 找到 指定 的 ActiveX 控 件 ， 则 筷 将 答 试 从 “ 基 址 ”指定 的 位 置 中 下 载 它 。 
07. “ 基 址 ”文本 框 用 于 指定 包含 该 ActiveX 控 件 的 URL。 
如 来 在 访问 者 的 系统 中 尚未 安 疙 ActiveX 控 件 , 则 Internet Explorer 从 该 位 置 下 载 
如 果 没 有 指定 “ 基 址 ”参数 ， 并 且 访 问 者 尚未 安装 相应 的 ActiveX 控 件 ， 则 浏览 右 不 能 : 
示 ActiveX 对 人 象 。 
08. 在 “和 鹤 换 图 像 ” 文 本 框 中 指定 当 浏 览 旨 不 支持 object 标 记 时 显示 的 图 像 。 只 
在 没有 选中 “和 通 入 ” 复 选 框 的 情况 下 ， 此 选项 才 可 用 。 
09 在 “数据 ”文本 框 中 为 要 加 载 的 ActiveX 控 件 指定 数据 文件 。 许 多 ActiveX 控 件 
(例如 Shockwave 和 RealPlayer) 不 使 用 此 参数 。 
10. 单 击 诬 二 播放- 按钮， 可 以 在 文档 窗口 中 预览 ActiveX 控 件 ， 此 时 按钮 变 为 
四 停止 |。 单 击 “ 停 止 ” 按 钮 可 以 结束 影片 播放 。 
11 单 击 “ 参 数 ” 投 钮 ， 可 以 打开 “参数 ”对 话 框 ， 在 其 中 输入 附加 参数 。 
12 旧 保存 文档 。 在 浏览 器 中 预览 整个 页 面 。 


mz 
D. o 
imi 


LEL]11. 3. 3 添加 shockwave 电 影 


Shockwave 是 一 种 插件 ， 使 得 在 Adobe Director 中 创建 的 多 媒体 文件 能 够 被 快速 下 载 ， 
而 且 可 以 在 大 多 数 弟 用 浏览 右 中 进行 播放 。 播 放 Shockwave 影 片 的 软件 既 可 作为 Netscape 
Navigator 插 件 提 供 ， 也 可 作为 ActivexX 探 件 提 供 。 当 插入 Shockwave 影 片 时 ，Dreamweavet 
同时 使 用 object 标 记 〈 用 于 ActiveX 探 件 ) 和 embed 标 记 ( 用 于 插件 ) 以 在 所 有 浏览 器 中 都 
获得 最 佳 效 打 。 
Shockwave 文 件 在 网 页 中 的 嵌入 方法 与 Flash 动 画 基本 一 样 ， 仅 仅 是 文件 格式 不 同 。 下 
面 通过 一 个 实例 演示 在 文档 中 插入 Shockwave 电 影 的 具体 操作 。 
01 在 “设计 ”视图 中 ， 将 插入 点 放置 在 要 搬入 Shockwave 影 片 的 位 置 。 
02 执行 “插入 ”/“ 媒 体 ”/“Shockwave” 菜 单 命令 ; 或 者 在 “常用 ”面板 中 单 
击 图 标 前 - ， 然 后 在 下 拉 菜 单 中 单 击 铅 sheeswsr。 。 
03 旧 在 弹出 的 “选择 文件 ”对 话 框 中 ， 选 择 一 个 Shockwave 影 请 文件 。 然 后 单 击 “ 确 
定 ” 按 钮 天 闭 对 话 框 。 
04 几 选中 插入 的 Shockwave 影 族 占 位 符 , 在 如 多 11-14 所 示 的 属性 面板 的 “ 宽 ” 和 “高 ” 
文本 框 中 分 别 输入 影 记 的 宽度 400 禹 度 300。 


: 2——ÀÀ' 1 
三 Shockwave, 55 32 GEPE(F) follow your dream. wma € C) T BS (c) ri 类 (C) (x9 
&0D 32 £ 

&EiBEE 四 MENU v] 
水 平 边 距 @) ^ 


ÉKl11-14 Shockwave 属性 面板 
05 | 单 击 属性 面板 上 的 “参数 ”按钮 ， 弹 出 “参数 ”对 话 框 ， 输 入 参数 “AutoStart” 
和 “Sound”， 其 值 均 为 true。 
06. 保存 文档 。 在 浏览 磺 中 预览 页 面 效果 。 
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在 建立 并 维护 一 个 站 点 的 过 程 中 ,很 多 页 面 会 用 到 同 
样 的 图 片 、 文 字 、 排 版 格式 。 如 果 逐 页 建立 、 修 改 ， 既 费 
时 、 费 力 ， 而 且 效 率 不 高 ， 还 很 容 多 出 错 ， 很 难 使 同一 个 
站 点 中 的 文件 有 统一 的 外 观 及 结构 .为 了 避免 机 械 的 重复 
落 动 ， 可 以 使 用 Dreamweaver 提 供 的 模板 和 库 功 能 ， 将 有 具 
有 相同 版 面 的 页 面 制作 成 模板 , 将 相同 的 元 素 制 作成 库 项 
目 ， 并 存放 在 模板 面板 和 库 中 以 便 随 时 调用 。 


006000 


模板 和 库 的 功能 
创建 模板 和 藤 套 模板 
应 用 模板 

管理 模板 
应 用 库 项 目 
管理 库 项 目 
模板 与 库 的 应 用 
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12.1 模板 和 库 的 功能 


在 Dreamweaver 中 ， 模 板 是 一 种 以 . dwt 为 扩展 名 的 特殊 文档 ， 用 于 设计 固定 的 页面 布 
局 。 模板 由 两 种 区 域 组 成 : 锁定 区 和 可 编辑 区 。 锁定 区 域 包含 了 在 所 有 页 面 中 共有 的 元 素 ， 
即 构成 页 面 的 基本 框架 ， 比 如 导航 条 、 标 题 等 。 第 一 次 创建 模板 时 ， 所 有 的 区 域 都 是 锁定 
的 。 而 可 编辑 区 域 是 根据 用 户 需 要 而 指定 的 用 于 设置 页 面 不 同 内 容 的 区 域 ， 通过 编辑 可 编 
辑 区 的 内 容 ， 可 以 得 到 与 模板 风格 一 致 ， 但 又 有 上 所 不 同 的 新 的 网 页 。 

柑 板 还 有 一 种 特殊 形式 ， 即 艇 套 模板 。 网 套 模 板 是 指 其 设计 和 可 编辑 区 域 都 基于 为 一 
个 模板 的 模板 。 生 成 通 套 模板 所 基于 的 模板 称 为 其 模板 ， 相 对 于 姐 套 模板 而 言 ， 基 模板 中 
包含 更 宽广 的 设计 区 域 ， 并 且 可 以 由 站 点 的 多 个 内 容 提 供 者 使 用 ;， 而 般 父 模板 可 以 进一步 
定义 站 点 内 特定 部 分 页 面 中 的 可 编辑 区 域 。 

模板 被 创建 之 后 ， 还 可 以 进行 修改 ， 例 如 添加 新 的 可 编辑 区 域 ， 或 锁定 可 编辑 区 域 。 
而 且 用 户 还 可 以 随时 将 基于 模板 创建 的 文档 与 模板 分 离 ， 编 辑 完 文档 之 后 ， 还 可 以 将 该 文 
档 与 相应 的 模板 重新 建立 联系 。 

在 同一 个 站 点 中 ， 网 页 文件 中 除了 相同 的 外 观 之 外 ， 还 有 一 些 需 要 经 常 更 狐 的 页 面 元 
素 ， 例 如 版 权 声 明 、 实 时 消息 、 公 告 内 容 ， 也 是 相同 的 。 这 些 内 容 与 模板 不 同 ， 它 们 只 是 
页 面 中 的 一 小 部 分 ， 在 各 个 页 面 中 的 摆 放 位 置 可 能 不 同 ， 但 内 容 却 是 一 致 的 。 在 
Dreamweaver 中 ， 可 以 将 这 种 内 容 保存 为 一 个 库 文 件 ， 在 需要 的 地 方 插入 ， 以 便于 在 需要 
的 时 候 能 够 快速 更 新 。 

库 用 于 存放 这 些 广泛 地 用 在 整个 站 点 中 ， 并 能 够 重复 地 被 使 用 或 需要 经 音 更 新 的 元 
系 ， 它 们 被 称 为 库 项 目 。 与 模板 相似 ， 库 也 是 Dreamweaver 中 处 理 重 复元 素 的 有 力 工 具 之 
一 。 库 可 以 使 重复 性 的 更 新 工作 更 快 、 更 容易 ， 并 且 无 差错 。 例 如 ， 每 个 页 面 上 都 有 一 个 
版 权 声 明 。 在 网 站 的 建设 过 程 中 ， 设 计 者 可 能 需要 经 常 改变 该 声明 。 如 果 一 个 一 个 页 面 地 
修改 ， 不 仅 要 花费 很 多 的 精力 和 时 间 ， 而 且 很 可 能 出 错 或 遗漏 。 如 果 使 用 库 ， 只 要 修改 库 
中 的 项 目 ， 束 可 以 保证 站 点 中 使 用 该 库 项 目的 页 面 全 部 目 动 更 新 。 

人 简 而 言 之 ， 模 板 是 一 种 页 面 布局 ， 重 复 使 用 的 是 网 页 的 一 部 分 结构 ， 而 库 是 一 种 用 于 
放置 在 网 页 上 的 资源 ， 重 复 使 用 的 是 网 页 对 象 。 但 它们 两 者 有 一 个 相同 的 特性 ， 惑 是 库 项 
目 和 模 联 板 与 应 用 它们 的 文档 都 保持 关联 ， 在 更 改 库 项 目 或 模板 的 内 容 时 ， 可 以 同时 更 狐 
所 有 与 之 关 的 页 面 。 因 此 使 用 库 与 模板 可 以 更 方便 地 维护 网 站 ; 合理 地 利用 模板 和 库 的 功 
能 可 以 极 大 地 提高 工作 效率 。 

执行 “窗口 ”/“ 资 源 ” 菜 单 命 令 ， 或 按 F8 快 捷 键 ， 打 开 如 图 12-1 所 示 的 “资源 ” 面 
板 。 单 击 “ 资 源 ” 面板 左 侧 的 模板 图 标 按钮 加 |， 即 可 切换 到 “模板 ”面板 ， 如 图 12-2 所 示 。 
面板 上 尘 部 分 显示 当前 选择 模板 的 缩 略 网 ， 下 半 部 分 则 是 当前 站 点 中 所 有 模板 的 列表 。 

“模板 ”面板 底部 的 按钮 是 模板 操作 的 快捷 来 单 。 各 个 按钮 的 作用 如 下 : 

名 : 刷新 站 点 列表 ， 更 新 模板 。 

£l. 在 模板 列表 中 新 建 一 个 未 命名 的 模板 。 

HP: 编辑 当前 在 模板 列表 中 选择 的 模板 。 

Ur. 删除 当前 在 模板 列表 中 选择 的 模板 。 
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: 将 选择 的 模板 应 用 到 当前 文档 中 。 


pueült 


Eleg 


032b1£. jpg 
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图 12-1 资源 面板 图 12-2 ”模板 面板 


用 户 可 以 从 无 到 有 创建 空白 的 模板 ， 然 后 在 其 中 输入 需要 的 内 容 ; 也 可 以 将 现 有 的 文 
档 存储 为 模板 。 创 建 模 板 之 后 ，Dreamweaver 会 自动 在 用 户 的 本 地 站 点 目录 中 添加 一 个 名 
为 Templates 的 目录 ， 然 后 将 模板 文件 存储 到 该 目录 中 。 
注意 : 不 要 将 模板 移动 到 Templates 文件 夹 之 外 或 者 将 任何 非 模板 文件 放 在 Templates 文件 夹 中 。 也 
不 要 将 Templates 文件 夹 移动 到 本 地 根 文件 夹 之 外 。 否 则 ， 将 在 模板 的 路 径 中 引起 错误 。 


[LL]. 2. 1 创建 空 模板 


在 Dreamweaver CS5 中 创建 空 模板 有 两 种 方式 ， 一 种 是 在 “ 狐 建 文档 ”对 话 框 中 创建 ; 
另 一 种 是 在 “模板 ”面板 中 创建 。 下 面 分 别 简要 介绍 其 步骤 如 下 : 
COD 执行 “文件 ”/“ 新 建 ” 采 单 命令 ， 打开 “新 建文 档 ” 对 话 框 。 
(2) 在 对 话 框 左 侧 的 “类 别 ” 栏 选中 “ 空 模 板 ”， 在 “模板 类 型 ”列表 中 选择 需要 
的 模板 类 型 ， 在 “布局 ”列表 中 选择 模板 的 页 面 布局 ， 然 后 单 击 “创建 ”按钮 。 
(3) 执行 “文件 ”/“ 保 存 ” 命 令 你 存 空 模板 文件 ， 此 时 会 弹出 一 个 对 话 框 ， 提 醒 用 
户 本 模板 没有 可 编辑 区 域 。 
在 选中 “不 再 警告 我 ” 复 选 框 ， 那 么 下 次 保存 没有 可 编辑 区 域 的 模板 文件 时 将 不 再 弹 
出 此 对 话 框 。 
(4) 单 击 “ 确 定 ” 按 钮 完成 存档 。 
在 “模板 ”面板 中 创建 空 模板 的 步骤 如 下 : 
(1) 在 Dreamweaver CS5 界 耐 中 选择 “窗口 ”/“ 资 源 ” 末 蛙 命 令 ， 调 出 “资源 ” 面 
板 ， 单 击 模板 图 标 按钮 一 ， 切 换 到 “模板 ”面板 。 
(2) 单 击 “模板 ”面板 底 端的 “新 建 模 板 ” 图 标 车 ,模板 列表 中 会 出 现 一 个 新 模板 ， 
且 名 称 为 可 编辑 状态 。 
(3) 输入 模板 名 称 之 后 按 Enter 键 ， 或 单 击 面板 其 他 空白 区 域 。 人 至此， 一 个 空 模板 残 
制作 完成 了 。 
模板 的 制作 方法 与 普通 网 页 类 似 ， 不 同 之 处 在 于 模板 制作 完成 后 ， 还 应 定义 可 编辑 区 
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域 、 重 复 区 域 等 便 板 对 象 。 有 关 介 绍 将 在 后 面 草 节 中 进行 介绍 。 


[L112. 2. 2 将 网 页 保存 为 模板 


用 户 也 可 以 将 已 编辑 好 的 文档 存储 为 模板 ， 这样 生 成 的 模板 中 会 带 有 现在 文件 中 已 编 
辑 好 的 内 容 ， 而 且 可 以 在 该 基础 上 对 模板 进行 修改 ， 使 之 满足 设计 需要 。 下 面 以 一 个 简单 
例子 演示 将 现 有 网 页 保存 为 模板 的 操作 步 又 。 

01. 执行 “文件 ”/“ 打 开 ” 命 令 ， 在 “选择 文件 ”对 话 框 中 选择 一 个 将 作为 模板 的 
普通 文件 。 如 图 12-3 所 示 。 
02 执行 “文件 ”/ “另存 为 模板 ” 沫 单 命 令 ， 弹 出 “另存 模板 ”对 话 框 。 


|. — » 
75. -tpubwwwroot Sfi PHIS. html (XHTML). QO c << aah oF ooQ 


b. LT-1-138 | QUY (ego | 
- 5mm | Ee ri | 
S | 


body? RB lo% v372x256v 1 K / 1 body? RQ lo% «3122x256 1 K / 1 


12-3 ”打开 的 普通 文件 12-4 转换 为 模板 的 文档 


03 肯 在 “站 点 ”下 拉 荣 单 中 选择 将 保存 该 模板 的 站 点 名 称 。 本 例 选 择 test。 
“现存 的 模板 ”列表 框 中 列 出 了 当前 选择 的 站 点 中 所 有 的 模板 文件 。 
04 在 “ 接 述 ”文本 框 中 输入 该 模 板 文件 的 说 明 信 息 。 本 例 保留 默认 设置 。 
05 在 “另存 为 ”文本 框 中 输入 模板 名 称 。 本 例 输 入 navigator。 
T RT BA PH, IPLA "BUENO Füge rp XE TET ETHICA MI e 
06 单 击 “保存 ”按钮 ， 即 可 关闭 对 话 框 。 
此 时 会 弹出 一 个 对 话 框 ， 询 问 用 户 是 否 要 更 新 链接 。 
07 月 单 击 “ 是 ”更 新 模板 中 的 链接 , 并 将 该 模板 保存 在 本 地 站 点 根 目录 下 的 Template 
PEE qM 
JE, SCRAÁBERAKUE IB ANZJCOOSO»navigator.dwt, 4WIÉKl12-4Ppzk. 3eWjixox iu 
不 是 普通 文档 ， 而 是 一 个 模板 文件 。 
将 该 文件 在 浏览 句 中 预览 ， 会 发 现 该 文档 中 无 法 键入 文本 或 插入 图 像 。 这 是 因为 还 没 
有 为 模板 定义 可 编辑 区 域 ， 所 有 的 区 域 都 是 锁定 的 。 有 关 定 义 可 编辑 区 域 的 操作 方法 ， 将 
JE F— BHn4rzB. 


[[112.2. 3 定义 可 编辑 区 域 


可 编辑 区 域 用 于 在 基于 模板 创建 的 HTML 网 页 中 改变 页 面 内 容 ， 可 以 是 文本 、 图 像 或 其 
他 的 媒体 ， 如 Flash 动 画 或 Java 小 程序 。 编 辑 完成 之 后 ， 可 以 将 该 文档 你 存 为 独立 的 HTML 
Xd. 
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下 面 以 一 个 简单 实例 演示 在 模板 中 定义 一 个 可 编辑 区 域 的 具体 操作 步骤 。 

01 KURZ 2 HIA ee 然后 在 文档 窗口 的 “ 设 
计 ” 视 图 中 插入 一 个 三 行 三 列 的 表格 ,合并 第 一 列 单 元 格 之 后 插入 图 像 ， 并 在 其 他 单元 格 
中 输入 文字 。 此 时 的 页 面 效果 如 图 12_5 所 示 。 

02 旧 选中 表格 的 第 二 行 二 列 到 第 三 行 三 列 ， 单 击 “ 常 用 ”面板 上 加 "图标 中 的 下 拉 箭 


头 ， 在 弹出 菜单 中 单 击 加 让 WE 琳 单 项 ， 弹 出 “新 建 可 编辑 区 域 ”对 话 框 。 


景点 介绍 | 门票 价格 
燕 天 风景 JT 


图 12-5 页 面 效 来 图 12-6 插入 的 可 编辑 区 域 


03 在“ 名称” 文本 框 输入 可 编辑 区 域 的 名 字 。 本 例 输入 “景点 名 称 ”， 然 后 单 击 
“确定 ”按钮 关闭 对 话 框 。 

插入 的 可 编辑 区 在 模板 文件 中 默认 用 监 绿色 高 亮 显 示 ， 并 在 顶端 显示 指定 的 名 称 ， 如 
图 12-6 所 示 。 

04. 保存 文件 。 一 个 简单 的 模板 文件 瓯 制作 完成 了 。 

05 则 打开 “模板 ”面板 ， 在 刚 保 存 的 模板 文件 上 单 击 忌 标 右 键 ， 然 后 在 弹出 的 来 单 中 
选择 “从 模板 狐 建 ”命令 ， 狐 建 一 个 HTML 文 档 。 

06 用 户 可 以 看 到 新 建 的 文档 内 容 与 保存 的 模板 一 样 ， 但 只 有 已 定义 的 可 编辑 区 域 
可 以 修改 ， 其 他 区 域 则 处 于 锁定 状态 。 如 图 12-7 所 示 。 


7$. Untitled-3 (XHTML)* ooo 


» A f 
—— 205 w I—— —— 38 4» ——— —4(————— 108 
有 0 = 一 一 * 


stance: editable> <tr> <td> [W]e Q Lo0% v448 x214v 1kKA1l 秒 


图 12-7 只 有 可 编辑 区 域 可 以 修改 


选中 模板 文件 中 的 可 编辑 区 域 , 切换 到 文档 窗口 的 “代码 ”视图 ,可 以 看 到 以 下 代码 : 
《!-- TemplateBeginEditable name- 景点 名 称 ” 一 - 
SIT 
<td height= ”47”align= center 38K Us X C/ td» 
«td align= “center >40 元 《</td> 
C bp? 
SO 
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《td height= 25”align= center > 理 溪 源 《]td> 
《td align= center >15 元 《</td> 
人 
«!— TemplateEndEditable --? 
TemplateBeginEditable 和 TemplateEndEditable 束 是 可 编辑 区 域 的 开始 与 结束 标志 


^r 


i 


AU R0 RRCPPISUBCHR II] AST T S ED BUE Jg EDO, n EE "yp? MUES "px rp ES 
除 的 可 编辑 区 域 ， 然 后 执行 “修改 ”/“ 和 模板 ”/ “删除 模板 标记 ” 沫 单 命 令 ， 即 可 将 可 编 
辑 区 域 变 为 不 可 编辑 区 域 。 


[中 2. 2. 4 定义 可 选区 域 


“可 选区 域 ”是 在 模板 中 指定 为 可 选 的 部 分 ， 用 于 保存 有 可 能 在 基于 模板 的 文档 中 出 
现 的 内 容 《〈《 如 可 选 文本 或 图 像 ) 。 例 如 ， 如 条 可 选区 域 中 包括 网 像 或 文本 ， 用 尸 可 设置 该 
内 容 在 基于 模板 的 新 文档 中 十 售 显 示 。 

下 面 以 一 个 简单 实例 演示 在 模板 文档 中 插入 可 选区 域 的 具体 步骤 。 

01. 新 建 一 个 HTML 模 板 文 件 ， 在 “设计 ”视图 中 ， 插 入 一 张 图 像 ， 此 时 的 页 面 效 来 
如 图 12-8 所 示 。 


[e << 和 模板 >> T4.dwb (XHTML) ooo 
ey ic pt 39 zr 1j 


d 
iody> Xp. STYLE? [RI Q 1008 vl372 x 2559 1 K / 1 


图 12-8 插入 图 像 
02 选中 图 像 ， 执 行 “ 插 入 ”/“ 模 板 对 象 ”/“ 可 选区 域 ” 来 单 命令 ， 或 捍 击 “ 营 


用 ”面板 上 回 "图标 中 的 下 拉 篆 头 ， 在 弹出 菜单 中 单 击 加 四 开 3 莘 ， 弹 出 如 图 12-9 所 示 的 


“新 建 可 选区 域 ”对 话 框 。 


| EZ 
新 建 可 选区 域 — 
= 一 一 基本 [ mw — 
EATZME S 0 —..] 取消 | 选择 现 有 和 参数 或 输入 一 个 表达 式 ， ANCONA E s = 
min 帮助 s 使 用 参数 : (E> | © 帮助 
输入 表达 式 : 


ÜptionalRegionl 


说 如 : LANGUAGE--' English 


图 12-9 “新 建 可 选区 域 ” 对 话 框 
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03 在“ 名称” 文本 框 中 输入 可 选区 域 模板 参数 的 名 称 。 本 例 使 用 默认 设置 。 

04 朋 选中 “默认 显示 ” 复 选 枉 ， 即 可 选区 域 默 认 状 态 下 可 见 。 本 例 选 中 此 项 。 

05 单 击 “局 级 ”标签 ， 选择 控制 可 选区 域 可 见 性 的 方式 。 本 例 选择 “输入 表达 式 ”， 
并 指定 表达 式 为 Language== English 。 

可 选区 域 是 由 条 件 语句 控制 的 。 用 户 可 以 在 “新 建 可 选区 域 ” 对 话 框 中 创建 模板 参数 
和 表达 式 ， 或 通过 在 “代码 ”视图 中 键入 参数 和 条 件 语句 来 控制 可 选区 域 。 

如 果 选 择 “ 使 用 参数 ”， 则 使 用 指定 的 参数 控制 可 选区 域 。 

如 果 选 择 “ 输 入 表达 式 ”， 则 根据 指定 的 表达 式 的 值 确定 是 人 否 显 示 可 选区 域 。 表 达 式 
值 为 趴 时， 显示 可 选区 ; 表达 式 值 为 假 ， 则 隐藏 可 选区 。Dreamweaver 目 动 在 输入 的 文本 
两 侧 插 入 双 3 引 号。 

06. 单 击 “ 确 定 ” 按 钮 ， 插 入 可 选区 域 。 最 终 制 作 结 果 ， 如 图 12-10 所 示 。 


* 
局 cB T4 dwt (XHTML)* ood 
可 选区 域 示例 


If Language--' English 


人 mmtenplate:if> [k]4y Q (00$  v|372 x 256v 1 K/1.— 


图 12-10 插入 的 可 选区 域 


如 果 要 编辑 参数 或 表达 式 ， 单 击 可 选区 域 左 上 角 的 标签 选中 该 可 选区 域 ， 然 后 在 属性 
面板 上 单 击 “编辑 ”按钮 ， 即 可 打开 “新 建 可 选区 域 ” 对 话 框 ， 进 行 重 新 设置 。 

选中 可 选区 域 之 后 ， 在 “代码 ”视图 中 可 以 找到 关于 可 选区 的 代码。 模板 参数 在 head 
部 分 定义 : 

《!-- TemplateBeginEditable name= head ”一 -> 

«!— TemplateEndEditable --? 

《!-- TemplateParam name-"OptionalRegionl^ type-^ boolean" value-" false" --5 

在 插入 可 选区 域 的 位 置 ， 将 出 现 类 似 于 下 列 代码 的 代码 : 

《!-- TemplateBeginlf cond= Language== English ”一 -> 

《img src-/../050bx. jpg”width= 268”height= 264" /> 

«1—- TemplateEndIf 一 一 > 

从 模板 创建 的 网 员 的 head 区 中 也 将 插入 模板 参数 部 分 代码 。 如 果 网 页 中 需要 显示 可 选 
区 内 容 时 ， 只 需 在 网 页 文档 代码 的 head 部 分 找到 上 述 代 码 ， 把 其 中 的 value 值 设置 为 true 
即 可 。 如 果 使 用 表达 式 ， 则 修改 cond 的 值 可 以 控制 可 选区 域 的 可 见 性 。 

模板 中 的 可 选区 域 是 不 可 编辑 的 ， 如 果 要 在 基于 模板 生成 的 页 面 中 修改 可 选区 域 ， 可 
把 光标 定位 于 可 选区 域内 部 ， 然 后 插入 可 编辑 区 。 作 为 可 选区 域 的 一 部 分 ， 可 选区 域内 的 
可 编辑 区 和 可 选区 同步 显示 和 隐藏。 

此 外 ， 直 接 单 击 “ 揪 入 ” 栏 “常用 ”面板 国 * 图 标 中 的 下 拉 箭 头 ， 在 弹出 菜单 中 单 击 


LE 
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[ 可 编辑 的 可 过 区 域 ， 可 插入 “可 编辑 的 可 选区 域 ”。 
1x19: 插入 可 选区 域 的 可 编辑 区 域 时 ， 不 能 先 选 定 内 容 ， 再 创建 可 编辑 的 可 选区 域 。 应 插入 区 域 ， 然 后 
在 该 区 域内 插入 内 容 。 


[[112.2.5 定义 重复 区 域 


重复 区 域 是 可 以 在 基于 模板 的 页 面 中 复制 任意 次 数 的 模板 部 分 。 重复 区 域 通常 用 于 表 
格 ， 当 然 ， 也 可 以 为 其 他 页 面 元 素 定义 重复 区 域 。 

重复 区 域 不 是 可 编辑 区 域 。 若 要 使 重复 区 域 中 的 内 容 可 编辑 ， 例 如 ， 在 表格 单元 格 中 
输入 文本 ， 则 必须 在 重复 区 域内 插入 可 编辑 区 域 。 

下 面 通过 一 个 简单 实例 演示 创建 重复 区 域 的 一 般 步 骤 。 

0 人 在 “文档 ”窗口 的 “设计 ”视图 中 ， 选 择 想 要 设置 为 重复 区 域 的 文本 或 内 容 ， 
或 将 插入 点 放 在 模板 中 想 要 插入 重复 区 域 的 位 置 。 本 例 选择 文档 中 插入 的 一 幅 图 片 。 

02 执行 “插入 ”/“ 模 板 对 象 ”/“ 重 复 区 域 ” 菜单 命令 ; 或 单 击 “ 常 用 ”面板 上 国 - 
图 标 中 的 下 拉 箭头 ， 在 弹出 的 上 下 文 菜单 中 单 击 国 EEEE 国 菜单 项 。 弹 出 如 图 12-11 所 示 的 
“新 建 重 复 区 域 ” 对 话 框 。 

03 朋 在 “新 建 重复 区 域 ”对 话 框 的 “名 称 ” 文 本 框 中 输入 重复 区 域 的 名 称 。 本 例 输 
入 “tiancheng” 

04 朋 单 击 “确定 ”按钮 ， 即 可 将 重复 区 域 插入 到 文档 中 。 如 图 12-12 所 示 。 


EJ - 154p d) 


: 
新 建 重复 区 域 e 
一 一 一 m :tiancheng 
Loo 二 本 一 到 
此 区 域 将 多 次 出 现在 基于 该 标 板 的 OH 
立 档 中 。 


图 12-11 “新 建 重 复 区 域 ”对 话 框 图 12-12 插入 的 重复 区 域 


05 朋 打开 “模板 ”面板 ， 在 刚 保 存 的 模板 上 单 击 鼠标 右键 ， 从 弹出 的 上 下 文 菜单 中 选 
择 “ 从 模板 新 建 ” 命 令 ， 新 建 一 个 文档 。 新 建 的 文档 如 图 12-13 上 所 示 。 
06) 单 击 页 面 中 的 加 号 CO 按钮 ， 在 页 面 中 添加 一 个 同样 的 图 片 ， 如 图 12-14 所 示 。 


e Untitled-2 (XHTML) ooo e Untitled-2 (XHTML)* ooo 
eR. congfuquyu x | a congfuquyu A 
CET TI | : CET T T 


| 重复 : tiancheng *|-1*1^l : : 重复 ; tiancheng +|-|v|<| 


nstance2 sbodyr> [k] e Q 1009€ v|313 x 192 nstance? <body> [k] em Q 1009 v|313 x 192» ; 


图 12-13 文 档 效果 图 12-14 重复 效 末 
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在 如 几 12-13 和 网 12-14 所 示 的 页 面 上 点 击 鼠 标 ， 会 发 现 无 法 选择 图 乒 ， 这 是 因为 还 没 
有 定义 可 编辑 区 域 。 

07 9 打开 保存 的 模板 , 选中 图 片 ,， 并 插入 一 个 名 为 pic 的 可 编辑 区 域 , 然后 保存 文档 。 

此 时 ， 基 于 该 模板 生成 的 文档 效果 如 图 12-15 所 示 。 每 一 个 生成 的 重复 区 域 都 自动 添 
加 了 一 个 名 为 pic 的 可 编辑 区 域 。 

08. 单 击 页 面 中 的 三 角形 按钮 加 让 ， 可 以 在 各 个 重复 区 域 中 切换 ， 选 中 某 个 重复 区 
Bn, fu. CO 按钮 ， 则 可 删除 当前 选中 的 重复 区 域 。 效 果 如 图 12-16 上 所 示 。 


| = r 
7. Untitled-2 (XHTML)* oQoo 7. Untitled-2 (XHTML)* ood 
"amm: NENNEN 7700 MEEMMMMMEEEMM 777773 
2 UX 19 258 12) *B.x LX oc 
| SM:tiancheng +|-|v|<| | | 重复 : tiancheng +|-|v|<| 
\ | 
tance:editable> [M] 43) Q (00$  v|313 x iv editable mg) [Wey Q low  v|313x 19v . 


图 12-15 添加 可 编辑 区 域 的 效果 图 12-16 删除 一 个 重复 区 域 之 后 的 效果 


[L]12. 2. 6 定义 嵌 套 模板 


秽 套 模板 是 指 设 计 和 制作 是 基于 一 个 模板 生成 的 模板 。 使 用 般 套 模板 可 以 创建 基 模 板 
的 变 体 ， 通 过 散人 套 多 个 栋 板 可 以 定义 精确 的 布局 。 

网 套 模板 继承 基 模 板 中 的 可 编辑 区 域 ， 除 非 在 这 些 区 域 中 插入 了 新 的 模板 区 域 。 在 髓 
套 模 板 中 ， 可 以 在 基 模 板 的 可 编辑 区 域 中 进一步 定义 可 编辑 区 域 。 

下 面 通过 一 个 简单 实例 演示 创建 庶 套 模板 的 一 般 步 骤 。 

01. 执行 以 下 操作 之 一 创建 一 个 基于 模板 的 新 文档 : 

> “打开 “模板 ”面板 ， 在 需要 的 基 模 板 上 单 击 鼠 标 右键 ， 然 后 在 弹出 的 下 拉 荣 单 中 
选择 “从 模板 新 建 ” 命 令 。 

> ”执行 “文件 ”/“ 新 建 ” 人 命令。 在 “新 建文 档 ” 对 话 框 中 ， 单 击 “ 模 板 中 的 页 ” 
选项 卡 ， 在 如 图 12-23 所 示 的 对 话 框 中 选择 包含 有 需要 的 模板 的 站 点 ， 然 后 在 文档 列表 中 
双击 该 模板 以 创建 新 文档 。 文 档 窗 口中 即 会 出 现 一 个 新 文档 。 

02 将 光标 定位 在 新 文档 中 的 可 编辑 区 域 〈 例 如 图 12-17 所 示 的 可 编辑 区 域 text) ， 
然后 在 “常用 ”面板 中 选择 需要 的 模板 对 象 。 本 例 插入 一 个 重复 表格 ， 用 于 设置 菜单 栏 。 
此 时 ， 会 弹出 一 个 对 话 框 ， 提 示 用 户 Dreamweaver 将 会 目 动 将 此 文档 转换 为 模板 。 

03. 单 击 “确定 ”按钮 ， 插 入 选中 的 模板 对 象 。 

04. 按照 上 两 步 的 方法 ， 插 入 其 他 需要 的 模板 对 象 。 本 例 插 入 一 个 可 编辑 区 域 和 一 
个 可 选区 域 ， 分 别 用 于 放置 帖子 正文 和 版权 声明 。 

059 你 存 文档 。 全 此 ， 一 个 髓 侠 模 板 束 创建 完成 了 。 如 图 12-18 所 示 。 
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图 12-17 基于 模板 生成 的 文档 图 12-18 在 文档 中 添加 模板 对 象 生 成 藤 套 模板 


此 外 ， 用 户 还 可 以 执行 “文件 ”/“ 另 存 为 模板 ”命令 ; 或 单 击 “ 常 用 ”面板 上 国 "图 
标 中 的 下 拉 第 头 ， 在 弹出 菜单 中 单 击 目 熙 33 浊 ,将 一 个 基于 模板 生成 的 新 文档 保存 为 
CES. 

在 基于 嵌 套 模板 生成 的 文档 中 ， 可 以 添加 或 更 改 从 基 模 板 传递 的 可 编辑 区 域 ( 以 及 在 
新 模板 中 创建 的 可 编辑 区 域 ) 中 的 内 容 。 


在 本 地 站 点 中 创建 模板 的 主要 目的 是 使 用 这 个 模板 创建 具有 相同 外 观 及 部 分 内 容 相 
同 的 文档 ， 使 站 点 风格 保持 统一 。 

在 文档 中 应 用 模板 有 两 种 方式 基于 模板 创建 新 文档 和 为 现 有 文档 应 用 模板 。 下 面 分 
别 进 行 介绍 。 


[Lli2.3. 1 基于 模板 创建 文档 


本 革 前 和 面 讲 述 的 例子 痢 是 使 用 这 种 方式 创建 独 文 档 ， 下 和 面 对 这 种 方式 的 具体 操作 步 缀 
进行 说 明 。 
(1) 执行 “文件 ”/“ 新 建 ” 染 单 命令 ， 打 开 “ 新 建文 档 ” 对 话 框 。 
(2) 里 击 “新 建文 档 ” 对 话 框 中 “模板 中 的 页 ”标签 ， 然 后 在 对 话 框 中 的 “站 后” 
下 拉 列 表 中 选择 要 应 用 的 模板 所 在 的 站 扣 。 
(3) 在 “站 扣 的 模板 ”列表 中 选择 需要 的 模 极 文件 ， 并 单 击 选 中 对 话 框 右 下 角 的 “ 当 
模板 改变 时 更 狐 页 面 ” 复 选 框 。 
(4) 早 击 “创建 ”按钮 ， 即 可 基于 指定 的 模板 创建 一 个 新 文档 。 
(5) 按 编 辑 普 通 HTML 文 档 的 方法 编辑 新 文档 的 页 面 内 容 。 
此 外 ， 用 户 还 可 以 直接 在 需要 的 模板 文件 上 单 击 鼠 标 右键 ,然后 在 弹出 的 上 下 文 菜 单 
中 选择 “从 模板 新 建 ” 命 令 ， 即 可 基于 指定 的 模板 生成 一 个 新 文档 。 
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[L]12.3. 2 为 文档 应 用 模板 


为 已 有 的 文档 应 用 模板 之 前 ， 首 先 应 确保 模板 已 定义 了 可 编辑 区 域 ， 否 则 在 应 用 模板 
时 ，Dreamweaver 会 弹出 一 个 提示 框 ， 提 示 用 户 所 应 用 的 模板 中 没有 任何 可 编辑 区 域 。 

为 文档 应 用 模板 的 一 般 操 作 步 又 如 下 : 

(1) 打开 一 个 普通 文档 。 

(20 执行 “修改 ”/ “模板 ”/ “应 用 模板 到 页 ” 沫 单 命 令 ， 打 开 如 网 12-19 所 示 的 “ 选 
择 模 板 ” 对 话 框 。 

(3) 在 “站 点 ”列表 中 选择 要 应 用 的 模板 所 在 的 站 点 ， 然 后 在 “模板 ”列表 中 选择 
需要 的 模板 。 本 例 选 择 本 章 制 作 的 模板 navigator。 

(4) 单 击 “ 选 择 模板 ”对 话 框 底部 的 “ 当 模 板 改变 时 更 新 页 面 ” 复 选 框 。 

(5) 单 击 “ 确 定 ” 按 钮 ， 弹 出 如 图 12-20 所 示 的 “不 一 致 的 区 域名 称 ” 对 话 框 。 提 示 
用 户 此 文档 中 的 某 些 区 域 在 新 模板 中 没有 相应 区 域 。 


- 
不 一 致 的 区 域名 称 @ 
此 六 档 中 的 某 些 区 域 在 新 模板 中 没有 相应 区 域 。 
r 
选择 拔 板 e 
模板 人 2 99e A 取消 | 
T3 Q 
liu 
option 将 内 容 称 到 新 区 域 : 用 于 所 有 内 容 :| 
liu famou . 
Ps iba L* | | *BB5 —— | 职 消 | 确定 | 
当 模 板 改 变 时 更 新 页 面 QUO 帮助 0 | 


图 12-19 “选择 模板 ”对 话 框 图 12-20 “不 一 致 的 区 域名 称 ” 对 话 框 


如 果 文 档 中 的 内 容 能 目 动 指定 到 模板 区 域 ， 则 不 会 弹出 此 对 话 框 。 

(6) 选中 列表 中 不 一 致 的 区 域名 称 ， 如 图 12-20 所 示 ， 此 时 “将 内 容 移 到 新 区 域 ” 后 
面 的 下 拉 列 表 变 为 可 用 状态 。 

CD 从 下 拉 列 表 中 选中 navigator 模 板 中 定义 的 可 编辑 区 域名 称 text。 此 时 ， 不 一 臻 
的 区 域名 称 列表 中 ， 选 定 的 区 域 后 面 的 “< 未 解析 >” 变 为 指定 的 区 域名 称 text。 

如 果 选 择 “ 不 在 任何 地 方 ” 选 项 ， 则 将 该 内 容 从 文档 中 删除 。 


(8) 单 击 “ 用 于 所 有 内 容 ” 按 钮 ， 将 所 有 示人 解析 的 内 容 移 到 选 定 的 区 域 。 
(9) 里 击 “确定 ”按钮 应 用 模板 。 应 用 模板 醒 后 的 页 面 效 果 如 图 12-21 所 示 。 
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图 12-21 应 用 模板 前 后 的 页 面 效 果 
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注意 : 将 模板 应 用 于 现 有 文档 时 ， 该 模板 将 用 其 标准 化 内 容 奉 换文 档 内 容 。 所 以 将 模板 应 用 于 页 面 乙 前 ， 
最 好 备份 页 面 的 内 容 。 

此 外 ， 用 户 也 可 以 直接 在 “和 模板 ”面板 中 用 鼠标 拖 动 模板 到 要 应 用 模板 的 文档 中 ， 或 
单 击 “ 模 板 ” 底 部 的 “应 用 ”按钮 ， 将 指定 的 醒 板 应 用 到 已 有 的 文档 。 


[Li2. 3. 3 修改 模板 并 更 新 站 点 


如 果 要 对 模板 内 容 进 行 修改 ， 可 以 在 “模板 ”面板 中 双击 中 要 编辑 的 模板 名 称 ， 或 选 
中 模板 之 后 ， 单 击 模板 底部 的 育 按 钮 ， 即 可 打开 模板 进行 编辑 。 

在 Dreamweaver 中 ， 如 条 修改 了 模板 ，Dreamweaver CS5 会 询问 是 否 修改 应 用 该 模板 的 
所 有 网 页。 用 户 也 可 以 手动 更 狐 站 点 中 的 页 面 。 利 用 Dreamweaver 强 大 的 站 点 管理 功能 ， 
用 户 可 以 轻松 地 批量 更 狐 所 有 应 用 同一 模板 的 文档 风格 。 

更 新 站 点 中 所 有 应 用 当前 模板 的 网 页 的 具体 操作 步骤 如 下 : 

(1) 对 模板 进行 修改 之 后 ， 执 行 “ 修 改 ”/“ 模 板 ”/“ 更 新 页 面 ” 命 令 ， 弹 出 如 图 

12-22 所 示 的 “更 新 页 面 ” 对 话 框 。 


US 更 新 页 面 QO 
= c. BEEN NEISONM 
更 新 :  HBURBQD 关闭 |C) 
v 3838 QD) 帮助 
显示 记录 (8) | 
状态 : 


图 12-22 “更 新 页 面 ” 对 话 框 


(20 在 对 话 框 中 的 “人 郁 看 ”下 拉 列 表 框 中 ， 选 择 页 和 面 更 新 的 范围 。 

如 果 选 择 “ 整 个 站 点” 选项 ， 可 以 在 后 面 的 站 后 下 拉 列 表 框 中 指定 要 更 新 的 站 点 ， 并 
对 指定 的 站 扣 中 所 有 的 文档 进行 更 新 。 

如 果 选 择 “ 文 件 使 用 ”选项 ， 可 以 在 后 面 的 下 拉 列 表 框 中 指定 要 更 新 的 模板 ， 并 对 站 
扩 中 所 有 使 用 该 模板 的 文档 进行 更 新。 不 使 用 该 模板 的 文档 不 会 被 更 新 。 

(3) . 在 “更 新” 后 和 面 的 复 选 框 中 选择 “模板 ”， 表 明 该 操作 更 新 的 是 站 扣 中 的 模 
板 及 基于 模板 生成 的 页 面 。 

(4) 单 击 “开始 ”按钮 ， 即 可 将 模板 的 更 改 应 用 到 站 点 中 指定 范围 内 的 网 页 ， 并 在 
“状态 ” 栏 显示 更 新 的 成 功 、 失 败 等 信息 。 


[L]12.3. 4 实例 制作 一 一 使 用 模板 生成 其 他 页 面 


在 前 面 的 革 方 中 己 制 作 了 个 人 网 站 实例 的 主页 index. html， 并 将 其 男 存 为 模板 
index. dwt。 由 于 本 网 站 实例 中 的 页 面 布局 基本 相同 ， 因 此 ， 本 节 将 基于 模板 index. dwt 制 
作 “ 道 听 途 说 ”的 链接 页 面 。 有 具体 步 又 如 下 : 

019 在 “模板 ”管理 面板 的 模板 列表 中 右 击 index. dwt， 然 后 在 弹出 的 上 下 文 菜单 中 
选择 “从 模板 独 建 ”命令 ， 新 建 一 个 未 命名 的 文档 。 

在 该 文档 中 ， 除 可 编辑 区 域 content 以 外 ， 其 他 区 域 均 不 可 编辑 。 
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02. 将 第 一 行 的 “欢迎 光临 我 的 小 屋 ” 修 改 为 “神农 架构 致 ”。 
03 旨 删除 content 区 域 第 二 行 的 图 片 ， 然 后 单 击 属性 面板 上 的 折 分 单元 格 图 标 ， 将 


其 拆 分 为 两 行 。 
04 将 光标 置 于 第 一 行 的 单元 格 中 ， 插 入 需要 的 文本 ， 如 图 12-23 所 示 。 
(5: cInetpubyblogmrite.html(xHTML) ooo! [5 CAInetpubiblog)writehtml (XHTML)* Qoo 


歌声 ， 因 此 还 须 漠 助 打 测 器 于 声 增色 神农架 构 训 是 文物 级 的 民歌 | 


”点燃 短 火 ， 彻 夜 唱 起 郴 鼓 ， 其 雄壮 与 翡 凉 ， 浓 缩 了 人 兽 共存 的 历 | 
史记 忆 。 构 鼓 将 是 一 个 历史 的 见证 ， 它 在 神农 架 原始 森林 之 中 回荡 ， 
一 首 人 人 必 会 的 歌 。 : 


HT too 人 oo ee goooooooooooooooooooooooooooosoooooooooooooooosooa 
OI 


Sie | 
一 酒 露珠 的 受 情 
E 

球衣 草 的 花语 是 等 待 爱 情 吗 


枝 鼓 ， 曾 是 神农 染 的 先 民 们 在 守夜 之 时 用 来 驱 走 野兽 ， 保 护 庄 称 
的 一 种 响 器 。 后 来 ， 枝 鼓 成 了 神农 架 的 男女 用 以 传递 情爱 、 倾 诉 心 声 的 
言 号 物 。 再 后 来 ， 郴 鼓 又 成 为 神农 架 的 子 填 们 在 喜庆 的 日 子 里 ， 用 以 擂 
W"eE EARECRAES 
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B 
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图 12-23 ”插入 文本 图 12-24 ”应 用 样式 的 超 链接 文本 


05 在 第 二 行 蛙 元 格 中 插入 一 条 水 平分 阳线 。 将 光标 前 于 第 三 行 , 然后 在 属性 面板 上 
设置 单元 格 内 容 的 水 平 对 章 方式 为 “居中 对 并 ”。 
06 在 第 三 行 得 入 文本 “最 新 更 新 ”， 然 后 在 属性 面板 上 设置 其 字体 为 方正 粗 倩 简 
体 ， 字 所 为 特大 ;颜色 为 椅 红 色 。 
07 肯 删除 第 四 行 的 跑马 灯 文 本 ， 但 保留 marquee> 标 记 。 然 后 输入 更 新 的 文章 标题 ， 
并 分 别 在 属性 面板 中 设置 其 链接 目标 和 目标 文件 的 打开 方式 。 
由 于 在 模板 index. dwt 中 设置 了 超 链接 的 文本 颜色 为 绿色 ， 且 无 下 划 线 ， 因 此 链接 文 
本 均 显 示 为 绿色 ， 如 网 12-24 所 示 。 
08 “道听途说 ”的 链接 页 面 制作 完毕 。 
如 下 要 制作 其 他 文章 的 页 面 ， 可 以 将 该 页面 为 存 为 模板 ， 并 将 文档 正文 部 分 定义 为 纺 
辑 区 域 ， 然 后 基于 该 模板 生成 新 的 页 面 。 只 要 更 改 文 音标 题 和 内 容 ， 即 可 完成 一 个 页 面 的 
制作 。 在 制作 “伊人 风尚 ”的 链接 页 面 photo. html 的 过 程 中 ， 为 便于 读者 理解 ， 没 有 使 用 
模板 ， 而 是 直接 在 index. html 的 基础 上 修改 生成 的 。 为 了 便于 网 站 以 后 的 更 新 和 维护 ， 最 
IAE index. dwt 生 成 负面 ， 然 后 修改 。 有 关 制 作 步 又 不 再 资 述 。 


在 Dreamweaver 中 ， 用 户 可 以 对 模板 文件 进行 各 种 管理 操作 。 例 如 ， 重 命名 、 删 除 、 
分 离 文 档 所 附 模板 等 。 下 面 进 行 简要 介绍 。 


[中 2. 4. 1 重 命名 模板 文件 
站 点 中 的 模板 都 存储 在 本 地 站 点 根 目录 下 的 Templates 目 录 下 ， 在 “模板 ”面板 的 模 
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板 列 表 中 也 可 以 看 到 当前 站 点 中 的 所 有 模板 。 如 果 要 快速 地 在 众多 的 模板 列表 中 找到 需要 
的 模板 ， 可 以 将 模板 命名 为 易 记 、 方 便 识别 的 名 称 。 如 来 要 重 命 名 模板 文件 ， 可 以 执行 以 
下 操作 : 

(1) 在 “模板 ”列表 中 单 击 要 重 命 名 的 模板 ， 然 后 在 其 名 称 的 位 置 再 次 单 击 ， 即 可 
使 其 名 称 文 本 框 处 于 可 编辑 状态 。 

(20 输入 需要 的 新 名 称 。 

(3) 投下 Enter 键 ， 或 在 模板 名 称 区 域 以 外 的 任意 空 日 区 域 单 击 ， 即 可 重 命名 模板 。 

重 命名 模板 之 后 , 系统 将 弹出 一 个 对 话 框 , 询问 用 户 是 否 要 更 新 已 应 用 此 模板 的 文档 。 


[L]t2. 4. 2 删除 模板 


(1) 在 “模板 ”面板 的 模板 列表 中 选中 要 删除 的 模板 项 。 
(2) 单 击 “ 模 板 ” 面 板 底 部 的 删除 按钮 UE ;或 单 击 鼠 标 右键 ， 从 弹出 菜单 中 选择 “ 删 
UR" d: 或 者 直接 按 下 Delete 键 。 
执行 以 上 操作 之 后 ，Dreamweaver 会 打开 一 个 对 话 框 ， 询 问 用 户 是 否 确 认 要 删除 选 定 
的 模板 。 
(3) 单 击 “是 ”按钮 ， 即 可 将 指定 模板 从 站 点 中 删除 。 


[L]12. 4. 3 分 离 文 档 所 附 模板 


通过 模板 创建 文档 之 后 ， 文 档 束 和 模板 密 不 可 分 了， 只 要 修改 模板 ， 束 可 以 目 动 对 文 
档 进行 更 新 。 通 第 将 这 种 文档 称 作 附 看 模板 的 文档 。 如 果 硕 望 能 随意 地 编辑 应 用 了 模板 的 
文件 ， 可 以 将 文档 从 模板 中 分 离 ， 即 靳 开 与 模板 的 链接 。 

(1) 打开 应 用 了 模板 的 文档 。 

(20 执行 “修改 ”/“ 模 板 ”/ “从 模板 中 分 离 ” 沫 单 命令 ， 即 可 将 文档 与 模板 中 分 


文档 与 所 附 模 板 分 离 之 后 ， 该 文档 变 为 一 个 普通 文档 ， 文 档 中 不 再 有 模板 标记 ， 如 图 
12-25 右 图 所 示 。 


| | 
75. CInetpub'wwwroot' Ez FHE84E.html (XHTML)* (3 [t] e 75. CAInetpub'wwwroot Ez FH A8 4E html (XHTML)* Q 9 e€ 
3 VE A | 了 


MeL i ae 下 面 对 这 种 方 z 
E 

(12 执行 "文件 新建" 菜单 命令 ， 打 开 * 新 建文 档 ` 对 话 框 

(2) 在 "新 建文 档 ' 对 话 框 中 选择 "模板 中 的 页 "标签 ， 从 加 图 12-23 肝 : 
对 活 框 左 例 的 站 点 "列表 中 选择 要 应 用 的 模板 所 在 的 站 点， fiet 
dpud EUR E 然后 单 击 选 中 对 话 框 右 下 角 的 “ 当 模 


(3) 单 击 “创建 按钮 ， 即 可 基于 指定 的 模板 创建 一 个 新 文档 。 
(40. 对 新 文档 进行 编辑 。 

外 ， 还 可 以 直接 右 击 异 板 "管理 面板 中 需要 的 模板 文件 ， 然 后 在 弹 
菜单 中 执行 “从 模板 新 建 "命令 ， 也 可 基于 指定 的 模板 生成 一 个 新 广 


[o er mE i a 即 可 基于 指定 的 模板 创建 一 个 新 文档 。 
qr 

另外 ， 还 可 以 直接 右 击 “模板 "管理 面板 中 需要 的 模板 交 件 ， 然 后 在 缠 
EF 菜单 中 执行 "从 模板 新 建 "命令 ， 也 可 基于 指定 的 模 梳 生成 一 个 新 六 


E ———MÀ— ——— —UA€— al »| | |[« [————————— Y pl 
»Div?^ mmtinstance:editable? <p> | 了 | Q 100€ v493x280v 1 K / 1 b body? [k]9? Q 100€  v|493 280v 1 K / 1 $5 


图 12-25 ”从 模板 中 分 离 前 后 的 效果 


文档 从 模板 中 分 离 出 来 之 前 ， 在 左上 角 可 以 看 到 可 编辑 区 域 的 名 称 和 和 标识， 右上 和 角 可 
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以 看 到 基 模 板 的 名 称 ， 如 12-25 左 图 所 示 。 


在 Dreamweaver 中 ， 可 以 将 任何 页 面 元 素 创 建 为 库 项 目 ， 如 文本 、 表 单 、 表 格 、 图 像 、 
导航 条 ， 甚 至 Java 程 序 、ActivexX 探 件 和 插件 。 库 项 目 是 一 种 扩展 名 为 . 1bi 的 特殊 文件 ， 
所 有 的 库 项 目 都 被 保存 在 本 地 站 点 根 目录 下 一 个 名 为 Library 的 文件 夹 中 。 每 个 站 点 都 有 
目 己 的 库 。 使 用 库 项 目 时 ，Dreamweaver 不 是 在 网 页 中 插入 库 项 目 ， 而 是 插入 一 个 指 问 库 
项 目的 链接 。 也 就 是 说 ，Dreamweaver 将 回 文 档 中 插入 该 项 目的 HTML 源 代码 副 本 ， 并 添 加 
一 个 包含 对 原始 外 部 项 目的 引用 的 HTML 注 释 。 

总 而 言 之 ， 利 用 库 可 以 实现 对 文档 风格 的 维护 。 可 以 将 某 些 文档 中 的 共有 内 容 定 义 为 
库 项 目 ， 然 后 放置 在 文档 中 。 用 户 可 以 在 任何 时 间 修 改 库 项 目 ， 编 辑 完成 后 ， 可 以 立即 更 
新 或 稍 后 更 新 站 点 中 使 用 库 项 目的 页 面 。 
注意 : Dreamweaver 需要 在 网 页 中 建立 来 目 每 一 个 库 项 目的 相对 链接 。 库 项 目 应 该 始终 放置 在 Library 
文件 夹 中 ， 并 且 不 应 同 访 文件 夹 中 添加 任何 非 . 1bi 的 文件 。 


[Li2. 5.1 库 面 板 的 功能 


利用 “ 库 ” 面 极 可 以 完成 大 多 数 的 库 项 目 操作 。 选 择 “ 和 窗口”/“ 资 源 ” 命 令 ， 调 出 
“资源 ”面板 。 单 击 “ 资 源 ” 面 板 左 侧 的 库 图 标 按 钮 三 ， 即 可 
切换 到 “ 库 ” 面 板 ， 如 图 12-26 所 示 。“ 库 ”面板 上 半 部 分 显示 
当前 选择 的 库 项 目的 预览 效果 ; 下 半 部 分 则 是 当前 站 点 中 所 有 
库 项 目的 列表 。 

“ 库 ” 面 板 底 部 的 按钮 是 库 项 目 操作 的 快捷 荣 单 。 各 个 按 

钮 的 作用 如 下 : 

C. 刷新 站 点 列表 ， 更 新 库 项 目 。 

£l. 在 库 列 表 中 新 建 一 个 未 命名 的 库 项 目 。 

L£: 编辑 当前 在 库 列 表 中 选择 的 库 项 目 。 

ur. 删除 当前 在 库 列 表 中 选择 的 库 项 目 。 图 12-26 “ 库 ” 面 板 

_， 括 A |， 将 在 库 列 表 中 选中 的 库 项 目 插入 到 当前 文档 中 。 


pue B 


EIE eg 


[L]12. 5. 2. 创建 库 项 目 


在 Dreamweaver 中 ， 可 以 将 单独 的 文档 内 容 定义 为 库 ， 也 可 以 将 多 个 文档 内 容 的 组 合 
定义 成 库 。 在 不 同 的 文档 中 放 入 相同 的 库 项 目 时 ， 可 以 得 到 完全 一 致 的 效果 。 

下 面 通过 一 个 简单 实例 演示 创建 库 项 目的 一 般 步 又 。 

01 新 建 一 个 HTML 文 档 ， 并 在 “页 面 属性 ”面板 中 将 “链接 文字 ”的 颜色 设置 为 白 
色 ， 且 始终 无 下 划 线 。 

02 在 “设计 ”视图 中 插入 一 个 二 行 四 列 的 表格 。 选 中 第 一 行 , 单 击 属性 面板 上 的 驯 
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按钮 合并 香 元 格 ， 然 后 在 合并 后 的 单元 格 中 插入 一 幅 图 片 。 
03 9 选中 第 二 行 单元 格 ， 在 属性 面板 上 将 其 背景 色 设 置 为 #81C58C( 果 绿色 ) 。 然 后 
在 单元 格 中 输入 文字 ， 并 为 文本 添加 超级 链接 。 此 时 的 效果 如 图 12-27 所 示 。 


返回 首页 | Jess | 生 话 随笔 | 联系 我 们 | 
112-27 将 保存 为 库 项 目的 页 面 元 素 
04 旧 选中 将 你 存 为 库 项 目的 整个 表格 ， 执 行 以 下 操作 之 一 将 选中 的 内 容 谎 加 为 库 项 


将 选中 的 内 容 拖 动 到 “ 库 ” 面 板 的 库 项 目 列表 中 。 
单 击 限 标 右键 ， 从 弹出 末 单 中 执行 “增加 对 象 到 库 ” 命 令 
选择 “修改 ”/“ 库 ”/“ 增 加 对 象 到 库 ” 沫 单 命 令 。 
单 击 “ 库 ”面板 确 部 的 “新 建 库 项 目 ” 按 钮 。 
05 为 狐 建 的 库 项 目 输入 名 了 字 ， 然 后 控 Enter 键 。 
此 时 ， 该 库 项 目 对 象 将 出 现在 库 列 表 中 。 


Li2. 5. 3 使 用 库 项 目 


创建 了 库 项 目 之 后 ， 束 可 以 在 需要 库 项 目 内 容 的 页 面 中 添加 库 项 目 。 当 癌 页 面 添 加 库 
项 目 时 ， 将 把 库 项 目的 实际 内 容 以 及 对 该 库 项 目的 引用 一 起 插入 到 文档 中 。 
下 面 通过 一 个 简单 实例 演示 在 页 面 中 使 用 库 项 目的 一 般 步 又 。 
0 与 将 插入 点 定位 在 文档 窗口 中 要 插入 库 项 目的 位 置 。 
02 旺 打开 “ 库 ” 面 板 ， 从 库 项 目 列表 中 选择 要 插入 的 库 项 目 。 
03. 单 击 “ 库 ”面板 左下 角 的 上 区 wj 按钮 ;或 直接 将 库 项 目 从 “ 库 ” 面 板 中 拖 到 文 
档 窗口 中 。 
此 时 ， 文 档 中 会 出 现 库 项 目 所 表示 的 文档 内 容 ， 同 时 以 淡 贡 色 珊 `， 表 明 它 是 一 
个 亩 项 目 。 如 图 12=28 所 示 。 


E 
75. C'Inetpubwwwroot 3 Y PES Untitled-13.html (XHTML )* 


c—— M M— M Á—— »| c—————MÁ— —— 
body? <hl. STYLE4> [(k]é9 Q Io0%  «j493x 280 1 K / 1 5 body? Ktable [k]é9 Qj lo0%  «j43 x 280v 1 K / 1 b 


112-28 ECT dHLALEEJILE IPRC 图 12-29 仅 插 入 库 项 目的 内 容 


在 “文档 ”窗口 中 ， 库 项 目 是 作为 一 个 整体 出 现 的 ， 用 户 无 法 对 库 项 目 中 的 局 部 内 容 
进行 编辑 。 如 果 和 希望 只 添加 库 项 目 内 容 而 不 希望 它 作为 库 项 目 出 现 ， 可 以 按 住 Ctrl1 键 的 同 
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出 现 ， 可 以 对 其 进行 任意 编辑 ， 如 图 12-29 所 示 。 


12. 6 是 和 定理 库 项 目 


在 Dreamweaver 中 ， 用 户 可 以 对 库 项 目 进 行 各 种 管理 操作 。 例 如 ， 重 命名 、 删 除 、 将 
库 项 目 从 源 文件 中 分 离 等 。 下 面 分 别 进行 简要 介绍 。 


Lj12. 6. 1 编辑 库 项 目 


编辑 库 项 目 首先 要 打开 库 项 目 。 打 开 库 项 目 有 以 下 几 种 方式 : 
e 在 “ 库 ” 面 板 的 库 项 目 列表 中 选中 要 编辑 的 库 项 目 ， 然 后 单 击 “ 库 ”面板 底部 的 
“编辑 ”图 标 按钮 。 
e 打开 一 个 插入 了 库 项 目的 文档 ， 选 中 库 项 目 ， 然 后 在 属性 面板 上 单 击 “打开 ” 按 
钮 。 

e 在 “ 库 ” 面 板 的 库 项 目 列 表 中 双击 要 编辑 的 库 项 目 。 

打开 库 项 目 后 ， 即 可 像 编 辑 图 厂 、 文 本 一 样 编 辑 库 项 目 。 
提示 : 编辑 库 项 目 时 ，CSS 样式 面板 不 可 用 ， 因 为 库 项 目 中 只 能 包含 body 元 素 ，CSS 样式 表 代 码 却 可 以 
插入 到 文档 的 head 部 分 。“ 页 面 属性 ”对 话 框 也 不 可 用 ， 因 为 库 项 目 中 不 能 包含 body 标记 或 其 属性 。 

库 项 目 编 辑 完 成 和 之后， 保存 库 项 目 ， 此 时 Dreamweaver 会 弹出 一 个 “更 新 库 项 目 ” 对 
话 框 ， 询 问 用 户 是 否 要 更 独 使 用 了 已 修改 的 库 项 目的 文件 。 

单 击 “ 更 新 ”按钮 ， 则 对 库 项 目 所 做 的 更 改 将 更 新 到 页 面 中 ; 否则 不 更 新 。 


[[112.6.2 重 命名 、 删 除 库 项 目 


站 点 中 的 库 项 目 都 存储 在 本 地 站 点 根 目 录 下 的 Liprary 目 录 下 ， 在 “ 库 ” 面 板 的 库 项 
目 列表 中 也 可 以 看 到 当前 站 点 中 的 所 有 库 项 目 。 如 果 要 快速 地 在 众多 的 库 项 目 中 找到 需要 
的 库 项 目 ， 可 以 将 库 项 目 命名 为 易 记 、 方 便 识 别 的 名 称 。 
如 果 要 重 命 名 库 项 目 ， 执 行 以 下 操作 : 
(1) 在 “ 库 ” 面 板 的 库 项 目 列表 中 单 击 要 重 命 名 的 库 项 目 ， 然 后 在 其 名 称 的 位 置 再 
次 单 击 ， 即 可 使 其 名 称 文本 框 处 于 可 编辑 状态 。 
(2) 输入 需要 的 新 名 称 。 
(3) 按 下 Enter 键 ， 或 在 库 项 目 名 称 区 域 以 外 的 空白 位 置 单 击 ， 即 可 重 命 名 库 项 目 。 
重合 名 库 项 目 之 后 ，Dreamweaver 将 弹出 一 个 对 话 框 ， 询 问 用 户 是 否 要 更 狐 已 使 用 此 
库 项 目的 文档 。 
如 果 不 再 需要 某 个 库 项 目 ， 最 好 将 其 删除 ， 以 节约 资源 。 删 除 库 项 目的 步骤 如 下 : 
(1) 在 “ 库 ” 面 板 的 库 项 目 列表 中 选中 要 删除 的 库 项 目 。 
(2) 单 击 “ 库 ” 面 板 底部 的 删除 按钮 宇 ， 或 单 击 鼠 标 右键 ， 从 弹出 菜单 中 选择 “ 删 
ER" dp: 或 者 直接 按 下 Delete 键 。 
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执行 以 上 步骤 之 后 ，Dreamweaver 会 打开 一 个 对 话 框 ， 询 问 用 户 是 合 确 认 要 删除 选 定 
的 库 项 目 。 
(3) 单 击 “ 是 ”按钮 ， 即 可 将 指定 的 库 项 目 从 站 氮 中 删除 。 
注意 : 删除 库 项 目的 操作 只 是 删除 了 库 项 目 文件 ， 且 删除 后 无 法 恢复 。 但 已 经 插入 到 文档 中 的 库 项 目 内 
容 并 不 会 被 删除 。 


[Ll2.6. 3 重新 创建 库 项 目 


上 一 市 提 到 过 ， 删 除 库 项 目 操 作 不 可 恢复 ， 但 该 操作 不 会 删除 已 插入 到 页 面 中 的 库 项 
目 内 容 。 如 末 不 小 心 误 删 除了 有 某 个 库 项 目 ， 利 用 Dreamweaver 提 供 的 “重新 创建 ”功能 ， 
可 以 恢复 以 前 的 库 项 目 文件 。 

简单 地 说 ，“ 重 新 创建 ”就 是 将 “文档 ”窗口 中 以 前 揪 入 的 库 项 目 内 容重 新 生成 库 项 
目 文 件 。 例 如 , 在 库 项 目 列 表 中 删除 库 项 目 topbar. 1bi, 然后 打开 使 用 了 该 库 项 目的 文件 ， 
会 发 现 插 入 的 库 项 目的 内 容 还 在 .选中 将 恢复 为 库 项 目的 内 容 , 然后 单 击 属性 面板 上 的 “ 重 
新 创建 ”按钮 ， 即 可 重新 创建 一 个 名 为 topbar. 1bi 的 库 项 目 。 

如 果 库 项 目 列表 中 己 有 了 一 个 名 为 topbar. 1bi 的 库 项 目 ， 则 Dreamweaver 会 显 不 一 个 
对 话 框 ， 提 示 用 户 使 用 该 功能 将 禾 盖 现存 的 库 项 目 文件 。 

如 果 是 重建 原来 没有 的 库 项 目 ， 执 行 “ 重 新 创建 ”命令 之 后 ， 库 项 目 不 会 立即 出 现在 
库 项 目 列表 中 。 用 户 可 以 单 击 “ 库 ” 面 板 底部 的 “刷新 站 点 列表 ”图 标 按 钮 ， 这 样 就 可 以 
在 库 项 目 列表 中 看 到 重建 的 库 项 目 了 。 


[I]12.6. 4 更 新 页 面 和 站 点 


编辑 或 重 命 名 库 项 目 以 后 ，Dreamweaver 会 提示 用 户 更 新 页 面 。 如 果 当 时 选择 了 “不 
更 新 ”按钮 ， 还 可 以 在 以 后 手动 选择 更 新 页 面 命令 。 
更 新 整个 站 点 或 所 有 使 用 特定 库 项 目 文档 的 操作 步骤 如 下 : 
(1) 执行 “修改 ”/“ 库 ”/“ 更 新 页 面 ” 沫 单 命 令 ， 弹 出 “更 新 页 面 ” 对 话 框 。 
(2) 在 对 话 框 中 的 “ 答 看 ”下 拉 列 表 框 中 选择 要 更 新 的 页 面 范 围 。 有 关 选 项 的 说 明 
己 在 本 章 12. 3. 3 节 进 行 了 说 明 ， 在 此 不 再 重复 。 
(3) 在 “更 新 ”后 面 的 复 选 框 中 选择 “ 库 项 目 ”， 表 明 要 更 新 的 是 当前 站 点 中 使 用 
了 库 项 目的 页 面 。 
(4) 单 击 “ 开 始 ” 按 钮 ， 即 可 将 库 项 目的 更 改 应 用 到 站 点 中 指定 范围 内 的 网 页 。 


[12. 6.5 将 库 从 源 文件 中 分 离 


与 模板 相似 ， 在 页 面 中 使 用 了 库 项 目 以 后 ， 该 文档 中 的 库 项 目 内 容 就 和 库 项 目 密 不 可 
分 了 ， 只 要 修改 了 库 项 目 ， 就 可 以 自动 对 文档 中 相应 的 部 分 进行 更 新 。 如 果 和 希望 能 随意 地 
编辑 文档 中 的 库 项 目 内 容 ， 可 以 将 库 项 目 从 源 文件 中 分 离 。 事 实 上 ， 此 时 页 面 中 的 内 容 已 
不 能 称 之 为 库 项 目 内 容 了 。 

在 使 用 了 库 项 目的 文件 中 ， 选 中 插入 的 库 项 目 ， 然 后 在 属性 面板 上 单 击 “ 从 源 文件 分 
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房 ” 命 令 ， 此 时 Dreamweaver 会 弹出 一 个 对 话 框 ， 提 示 用 户 把 库 项 目 变 为 可 编辑 状态 之 后 ， 
当 库 项 目 被 改变 时 ， 访 文档 中 相关 的 内 容 不 会 目 动 更 新 。 

如 条 单 击 “ 确 定 ” 投 钮 ， 则 确认 操作 ， 将 当前 选择 的 内 容 从 库 项 目 中 分 离 出 来 ， 如果 
选择 “取消 ”按钮 ， 则 取消 操作 。 
技巧 : 在 将 库 项 目 拖 到 “文档 ”窗口 的 同时 ， 按 下 Ctrl 键 ， 也 可 以 将 库 项 目 从 源 文件 中 分 离 


[12. 6.6 实例 制作 一 一 版 权 声明 


网 站 的 版 权 声 明 也 是 一 个 重复 使 用 的 元 素 。 本 实例 的 厂 权 声明 制作 步骤 如 下 : 

01 打开 模板 index. dwt， 将 光标 定位 在 布局 表格 右 侧 ， 然 后 按 下 Shift + Enter 组 
合 键 插入 一 个 软 回 车 。 

02) 单 击 “ 和 常用 ”面板 上 的 图 像 图标 按 钮 ， 在 弹出 的 “选择 文件 ”对 话 框 中 选择 一 
条 分 割 线 。 

03 将 光标 置 于 插入 的 分 隔 线 右 侧 ， 按 下 Shift + Enter 组 合 键 插入 一 个 软 回 车 。 然 
后 输入 需要 的 版 权 声 明文 本 。 

04 选中 其 中 的 邮箱 地 址 ， 在 属性 面板 的 “链接 ”文本 框 中 输入 mailto:vivi@123. 
com。 此 时 的 页 面 效 果 如 图 12-30 所 示 。 


F& PR PFN 


| | KS emer Vii 2010 
Email: vi£123.com 


图 12-30 ”页面 效果 


05 昌 选中 插入 的 版 权 和 内容， 执行“ 修改 ”/“ 库 ”/ “增加 对 象 到 库 ” 沫 单 命令 。 

06 在 “ 库 ” 管 理 面 板 的 库 项 目 列表 中 将 狐 增 的 库 项 目 命名 为 copyright, Ibi. 

07 月 单 击 “ 库 ”管理 面板 底部 的 “刷新 站 点 列表 ”图 标 按钮 C. ， 刷 新 库 项 目 列表 。 

08 执行 “文件 ”/“ 保 存 ” 沫 单 命令， 弹出 “更 新 页 面 ” 对 话 框 。 在 “更 新 ”区 域 
选择 “ 库 项 目 ”， 其 他 选项 你 留 于 认 设置 ， 然 后 单 击 “ 开 始 ”按钮 更 新 页 面 。 


09. S get, TESEIHE BLEU BUILUUIBI- 此 时 的 主页 I 31 所 示 。 


图 12-31 页面 效果 
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前 面 己 详细 介绍 了 模板 和 库 的 相关 操作 。 下 面 通 过 一 个 实例 以 加 深 旋 者 对 本 章 内 容 的 
理解 。 本 例 首 先 制作 了 一 个 模板 ， 然 后 基于 该 模板 生成 其 他 页 面 布局 相似 的 网 页 。 然 后 制 
作 一 个 版 权 声 明 的 库 项 目 ， 并 添加 到 模板 中 ， 目 动 更 新 页 面 后 ， 所 有 的 页 面 中 都 将 显示 版 
权 信 息 。 

本 例 的 制作 步骤 如 下 : 

101. 启动 Dreamweaver CS5， 新 建 一 个 HTML 模 板 文件 。 在 “页 面 属 性 ”对 话 框 中 设置 

“链接 文字 ”的 颜色 为 黑色 ， 且 “始终 无 下 划 线 ”。 

和 02 制作 第 一 张 页 面 ， 内 容 如 图 12-32 所 示 。 为 了 便于 控制 对 齐 格式 ， 正 文 的 内 容 音 
分 放 在 一 个 两 行 一 列 的 表格 内 。 

203. 选中 页 面 中 的 正文 部 分 ， 单 击 “ 插 入 ” 栏 “ 常 用 ”面板 上 回 - 图 标 中 的 下 拉 箭 
头 ， 在 弹出 菜单 中 单 击 国 按钮 。Dreamweaver 将 弹出 一 个 提示 对 话 框 ， 提 示 用 户 将 自动 把 
文档 转 为 模板 文件 。 


ee ee ee mU 


uo div? able? Cu Ou MivifvervCentent? ee tenolats elitable) [ND a 40$  ,Ttx Se ZX7 1 "d 
12-32 页面 效 果 12-33 文档 中 的 两 个 可 编辑 区 域 


有 04 月 单 击 “ 确 定 ” 按 钮 ， 弹 出 “新 建 可 编辑 区 域 ” 对 话 框 。 在 “名 称 ” 采 用 默认 值 ， 
再 单 击 “ 确 定 ” 按 钮 ， 插 入 可 编辑 区 域 。 

和 05 和 光标 定位 在 表格 外 ， 回 车 后 再 插入 一 个 可 编辑 区 域 , 用 于 插入 版 权 信息 。 至 此 文 
档 共 有 两 个 可 编辑 区 域 ， 如 图 12-33 所 示 。 

有 06 月 执行 “文件 ”/“ 保 存 ” 荣 单 命 令 ， 将 文件 保存 为 模板 文件 blog. dwt。 

和 07 肯 打开 “ 库 ” 面 板 ， 单 击 “ 库 ”面板 底部 的 新 建 库 项 目 按钮 急 ， 建 立 一 个 名 为 
copyright. 1bi 的 库 项 目 。 

&o8) 在 库 项 目 列表 中 双击 库 项 目 copyright. 1bi， 打 开 该 库 项 目 文件 。 


^10. ZE X ffFcopyright. 1bi 中 插入 一 张 三 行 一 列 的 表格 , 并 设置 表格 为 居中 对 齐 ,“ 边 
性” 属性 设置 为 0。 在 表格 里 输入 “版 权 ” 等 文学 之 后 保存 文件 。copyright. 1bi 最 终 制作 
结果 如 图 12-34 所 示 。 

011. 打开 “模板 ”管理 面板 ， 在 模板 列表 中 右 击 模板 blog. dwt， 在 弹出 的 上 下 文 菜 
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单 中 执行 “从 模板 新 建 ” 命 令 ， 新 建 基于 模板 的 文档 。 可 以 发 现在 文档 中 只 有 正文 部 分 和 
撒 部 的 可 编辑 区 是 可 编辑 的 。 


[Ra ho% v358x 1099 1 K / 1 .-: 


12-34 copyright. Ibi X fF2 A 


12 朋 把 EditRegion2 可 编辑 区 内 的 文字 “EditRegion2” 删 掉 。 然 后 打开 “ 库 ” 管 


面板 ， 把 库 项 目 copyright. 1bi 拖 到 EditRegion2 可 编辑 区 内 。 此 时 的 页 the 
所 示 。 

执行 “文件 ”/ “保存 ”命令 保存 文件 ， 完 成 第 一 张 网 页 的 制作 。 

0147 打开 模板 管理 面板 ， 右 击 blog. dwt 模 板 ， 在 弹出 的 上 下 文 菜单 中 执行 “从 模板 
新 建 ” 人 命令， 创建 第 二 个 基于 模板 的 文档 。 

altis iili 如 图 12- 36 所 示 。 


Eon MEM HN ELM ET ii 多 
图 12-35 在 网 页 插入 库 项 目 图 12-36 第 二 张 网 页 效果 


(16. 把 EditRegion2 可 编辑 区 内 的 文字 “EditRegion2” 删 掉 。 然 后 打开 “ 库 ” 管 
面板 ， 把 copyright 库 项 目 拖 到 EditRegion2 可 编辑 区 内 。 

70 按 同样 的 方法 制作 其 他 网 页 。 

118 打开 “模板 ”管理 面板 ， 双 击 blog. dwt 模 板 打 开 文 件 。 修 改 模板 页 面 左 侧 的 链 
接 ， 使 之 链接 到 到 上 面 制作 的 相应 文件 。 

119) 修改 完 链接 ， 保 存 模板 文档 。 此 时 会 弹出 “更 新 模板 文件 ”对 话 框 。 单 击 “ 更 
新 ”按钮 ， 更 新 使 用 模板 的 文件 。 然 后 单 击 “ 关 闭 ” 投 钮 完成 网 页 制作 。 

-20 保存 文档 。 按 F12 键 在 浏览 器 中 预览 页 面 效果 ， 如 图 12-37 和 图 12-38 所 示 。 

单 击 左 侧 的 导航 栏 图 片 “Music”， 即 可 切换 到 如 图 12-38 所 示 的 第 二 张 网 页 。 

页 面 中 的 每 一 首 歌 的 名 称 均 为 超级 链接 ， 单 击 其 中 一 首 ， 即 可 打开 相应 的 页 面 开 始 播 
放 。 
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图 12-37 首页 效果 图 12-38 第 二 张 网 页 效果 
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动态 网 页 基础 


网 络 技术 日 新 月 异 , 当今 的 网 络 已 经 不 再 是 早期 的 静 
态 信 息 发 布 平台 ， 它 已 被 赋予 更 丰富 的 内 涵 。 现在 , A 
不 仅 需要 Web 提 供 所 需 的 信息 , 还 需要 提供 可 个 性 化 服务 
功能 ， 比 如 可 以 收发 Email， 可 以 进行 网 上 销售 ， 可 以 从 
事 电子 商务 等 。 为 实现 以 上 功能 ， 必 须 使 用 网 络 编程 技术 
制作 动态 网 页 。 

本 章 将 简要 介绍 Dreamweaver CS5 的 部 分 动态 网 页 功 
能 ， 初 学 者 可 以 体会 Dreamweaver 在 编辑 动态 网 页 方面 的 
优势 ， 也 可 以 为 系统 学 习 动 态 网 页 作 一 个 铺垫。 
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动态 网 页 概述 
安装 、 配 置 IIS 服务 器 
设置 虚拟 目录 
制作 动态 网 页 的 步骤 
连接 数据 库 
定义 数据 源 


绑 定 动态 数据 
设置 实时 视图 
制作 动态 网 页 元 素 
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动态 网 页 发 布 搁 术 的 出 现 使 得 网 站 从 展示 平台 变 成 了 网 络 交 互 平 台 。 基 于 数据 库 技术 
的 动态 网 站 ， 不 但 可 以 大 大 降低 网 站 更 新 和 维护 的 工作 量 ， 还 可 以 实现 网 站 和 访问 者 的 互 
ab. 

本 书 第 1 章 已 介绍 过 静态 网 页 和 动态 网 页 的 区 别 。 动 态 网 页 URL 的 后 组 不 
是 . htm、. html、 shtml、. xml 等 静态 网 页 的 常见 形式 , 而 是 以 .asp、. jsp、. aspx.. php、. perl 
等 形式 为 后 缀 ， 并 且 在 动态 网 页 网 址 中 有 一 个 标志 性 的 符号 “? ”。 

动态 网 页 其 实 就 是 建立 在 B4S《〈 浏 览 锅 /服务 器 ) 架构 上 的 服务 器 闹 脚 本 程序 ， 当 客户 
并 用 户 回 Web 服 务 器 友 出 访问 该 脚本 程序 的 请 求 时 ，Web 服 务 器 将 根据 用 户 所 访问 页 面 的 后 
绥 名 确定 该 页 面 所 使 用 的 网 络 编程 技术 ， 然 后 把 该 页 面 提 交 给 相应 的 解释 引擎 。 解 释 引 擎 
扫 摘 整个 页 面 找到 特定 的 定 界 符 ， 并 执行 位 于 定 界 符 内 的 脚本 代码 以 实现 不 同 的 功能 ， 然 
后 把 执行 结束 《一 个 静态 网 页 ) 返回 Web 服 务 器 。 最 终 ，Web 服 务 器 把 执行 结 采 连同 页 面 上 
的 HTML 内 容 以 及 各 种 客户 内 脚本 一 同 传送 到 客户 器。 因此 , 动态 网 页 能 够 根据 不 同 的 时 间 、 
不 同 的 来 访 者 而 显示 不 同 的 内 容 ， 还 可 以 根据 用 户 的 即时 操作 和 即时 请 求 使 动态 网 页 的 内 
容 发 生 相应 的 变化 。 如 常见 的 BBS、 留 言 板 、 聊 天 宇 等 束 是 利用 动态 网 页 来 实现 的 ， 在 浏 
哆 器 问 显 示 的 网 页 是 服务 器 病程 序 运 行 的 结 末 。 

动态 网 站 其 有 以 下 显 闭 优点 : 

€ ”可 显著 提高 网 站 维护 的 效率 。 

€ Mta, EISE. fW. ESTIS. 

€ uU SO E W x EB SJ. 

Dreamweaver 提 供 了 众多 的 可 视 化 设计 工具 、 精 人 简 而 高 效 的 应 用 开 友 环境 以 及 代码 编 
辑 文 持 。 使 用 Dreamweaver CS5 可 视 化 的 方式 来 编辑 动态 网 页 ， 就 像 编 辑 普 通 网 页 一 样 简 
单 ， 用 户 儿 乎 不 用 编写 任何 程序 代 人 码 束 能 开发 出 功能 强大 的 网 络 应 用 程序 。 


在 创建 动态 网 页 之 前 ， 首 先 要 和 安装 和 设置 Web 服 务 器 ， 并 创建 数据 库 。 
目前 网 站 的 服务 器 一 般 安 装 在 WindowsNT、Windows2000Server 或 WindowsXP 操 作 系 统 


中 。 如 果 要 运行 动态 网 站 ， 如 ASP 网 站 ， 还 必须 安 半 Web 服务器 。 推 荐 初学 者 使 用 IIS 
(Internet Information Server， 因 特 网 信息 服务 系统 ) 。 该 服务 器 能 与 Windows 系 列 操 
作 系 统 无 颖 结合 ， 且 操作 简单 。 
下 面 殴 以 凡 ndows XP 为 例 ， 讲 解 IIS 组 件 的 安 闭 步骤 。 其 他 操作 系统 下 的 操作 方式 与 
此 头 似 。 
(1) fEWindows XP 操 作 系 统 中 选择 “开始 ”/ “控制 面板 ”/“ 诬 加 /删除 程序 ”网 标 ， 
打开 “添加 /删除 程序 ”对 话 框 。 
《2) 单 击 对 话 框 左 侧 的 “添加 /删除 Windows 组 件 ? 选 项 , 弹出 如 图 13-1 所 示 的 “Windows 
组 件 问 导 ” 对 话 框 。 在 该 对 话 框 中 选择 要 添加 的 组 件 Internet 信 息 服 务 〈IIS) 。 
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Windows 组 件 向 导 Internet 信息 服务 (IIS) 
Yindows iHft pem i 、 、， 、 ES 站 
可 以 添加 或 肌 除 Windows XP 的 组 件 。 ZU MI 
Internet 信息 服务 (IIS) ÉRESHPT (C: 


口 Tg Internet 信息 服务 管理 单元 
[| EaSMIP Service 

[] p RIPE 

C 超 万 维 网 服务 


iv (Outlook Express 


描述 : 包括 Web 和 FTP 志 持 ， 以 及 对 FrontFage、 事 劳 处 理 、Active 
Server Pages 和 数据 库 人 连接 的 支持 。 


所 需 磁 盘 空 间 : 59.7 MB imm 
可 用 磁盘 空间 : 225.3 MB PHI B QD. 所 需 磁 盘 空 间 : 


59.7 MB 
可 用 磁盘 空间 : 225.3 MB 


图 13-1 选中 了 IIS 组 件 图 13-2 IIS 子 组 件 的 选择 画面 


(3) 双击 “Windows 组 件 问 导 ” 对 话 框 组 件 列 表 中 的 “Internet 信 息 服 务 (IIS) ” 选 
项 ， 弹 出 如 图 13-2 所 示 的 对 话 框 。 

笔者 建议 初学 者 将 这 些 可 选 的 服务 全 部 选 上 。 

(4) 选择 需要 使 用 的 组 件 之 后 ， 选 择 “ 确 定 ” 按 钮 ， 并 将 对 应 的 操作 系统 安 猜 盘 放 入 
光驱 内 。 此 时 将 弹出 一 个 复制 文件 的 窗口 。 

(5) 文件 复制 完成 之 后 ， 单 击 “ 完 成 ”按钮 ， 完 成 IIS 服 务 安 猜 。 

此 时 ， 在 安 猜 操作 系统 的 倒 盘 目录 下 可 以 看 到 一 个 名 为 Inetpub 的 文件 夹 。 

下 面 测试 一 下 Web 服务器。 使 用 任何 误 悉 的 文本 编辑 器 〈 比 如 Windows 目 带 的 记事 本 
程序 )， 编 写 如 下 代码 : 


«9 
Response.write ( 欢迎 来 到 ASP 世界 “) 
05» 


将 文件 保存 到 \Inetpub\wwwroot 目录 下 ， 命 名 为 2-1. asp。 然 后 打开 浏览 器 ， 在 地 址 
栏 中 输入 http://localhost/2-1.asp， 如 果 得 到 相应 的 显示 页 面 ， 则 说 明 DIS 安装 成 功 。 


完成 了 IIS 的 安装 之 后 ， 就 可 以 利用 IIS 在 本 机 上 创建 Web 站 点 了 ， 但 在 此 之 前 必须 进 
行 相应 的 设置 。 下 面 介 绍 配置 IIS 服 务 器 的 一 般 步 骤 。 

(1) 打开 “控制 面板 ”/“ 性 能 和 维护 ”中 的 “管理 工具 ”页 面 ， 双 击 页 面 右 侧 列表 
中 的 “Internet 服 务 管 理 句 ”网 标 ， 即 可 打开 “Internet 信 息 服 务 ” 窗 口 。 

在 “Internet 信 息 服 务 ” 窗 口中 可 以 看 到 ， 使 用 IIS 可 以 管理 网 站 、 默 认 SMTP 虚 拟 服 
务 器 等 。 下 面 将 介绍 如 何 配置 IIS。 

(20 在 左 侧 窗 格 中 单 击 “默认 网 站 ”节点 ， 则 右 侧 的 窗 格 中 将 显示 默认 的 Web 主 目录 
下 的 目录 以 及 文件 信息 。 如 图 13-3 所 示 。 

主 目录 是 指 服务 右上 映射 到 站 点 域名 的 文件 夹 。 如 果 要 用 来 处 理 动态 页 的 文件 夹 不 是 
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主 目 录 或 其 任何 子 目 录 ， 则 必须 创建 虚拟 目录 。 有 关 虚 拟 目 录 的 介绍 将 在 本 革 下 一 节 中 介 
绍 。 


WjInternet 信息 服务 
文件 多 ) BRÍEQO ”查看 QM) 帮助 
向 加 镶 章 忆 久 图 时 
LL: Internet 信息 服务 路 径 
c J£) B650BE692DAD463 (本 地 计算 村 ci\windows\help\iishelp 
站 E: mywork-050404*DWCS3*blog 
E: mywork-Ü0B50404*DWCS3* £ashi on 


(Printers C: NNINDOWS*webXprinters 
国 mmServerScripts 


一 : T t li t 
| -. Printers net clien 


比 (23  mmServerScript 
| (zs aspnet client 
由 - 国 bin 单 击 jy 
&-(zg BookShop VA. p 后 
&- Dg Library CIT - 
四 music-aspnet (CdSeripts 

由 fe] pictures (Templates 

由 CJ Scripts Cjsrsscr exe 

& C Tenplates Cgse MX (3) 
"B cJ Nee SP PE (dSpryhssets 
eL 新 建文 件 夹 (3) [9] help. gif 


— Spryhssets [9] lisstart. asp 


iA SMTP 虚拟 服务 器 [8] Local start. asp 


| 
| 而 | 本 


图 13-3 默认 网 站 节点 下 的 目录 及 文件 信息 


(3) 在 “默认 网 站 ” 结 点 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ， 
打开 “默认 网 站 属性 ”对 话 框 ， 如 图 13-4 所 示 。 


网 站 。 | ISAPI 第 选 器 | 主 目录 | 交 档 | 目录 安全 性 | HTTP 头 | 自 定义 错误 | | 网 站 | ISAPI 筛选 器 | 主 目录 | 文档 _ | 目录 安全 性 | HTTP 头 | 自 定义 错误 | | 


网 站 标识 连接 到 | 资源 时 的 内 容 来 源 : 
描述 (8): 默认 网 站 | 〇 另 一 台 计算 机 上 的 共享 (6) 
: — —uv TE 
Demo CIEN OBA LO) 
TCP Pm Ji: 80 
ta 本 地 路 径 (C): c: Sinetpub'wwwroot 
连接 回 记 录 访问 (v) 
连接 超时 QD: [v] c8 | 9:38 QD 
[v]fgd& HTTF 连接 (QO m ES @) 
同 启 用 日 志 记 录 台 ) 应用 程序 设置 
活动 日 志 格 式 四 : 应 用 程序 名 QD : 默认 应 用 程序 
vc 扩展 日 志文 件 格式 v] 开始 位 置 : GARI? 
执行 权限 到) : 纯 脚本 [v] 
应 用 程序 保护 @@: — [cp EFI) 图 9€ 
图 13-4 设置 默认 网 站 的 属性 图 13-5 设置 网 站 的 主 目 录 
在 该 页 面 中 可 以 设置 站 点 的 IP 地 址 和 TCP 端 口 。 一 般 来 说 ， 初 学 者 不 需要 对 此 页 面 的 
内 容 进 行 修改 。 


(4) 单 击 “ 主 目录 ”页 签 ， 切 换 到 如 图 13-5 所 示 的 “ 主 目录 ”选项 卡 。 该 页 面 用 于 
设置 Web 站 点 的 主 目 录 ， 即 站 点 文件 的 位 置 。 这 是 配置 IIS 中 最 重要 的 一 个 选项 。 

成 功 安装 IIS 之 后 ，Web 站 点 默认 的 主 目录 是 : 系统 安装 盘 符 :\inetpubN\wwwroot 。 用 
户 也 可 以 将 主 目录 设置 为 本 地 计算 机 上 的 其 他 目录 ， 还 可 以 设置 为 局 域 网 上 其 他 计算 机 的 
目录 ， 或 者 重 定 问 到 其 他 网 址 。 读 者 只 需 在 “连接 到 资源 时 的 内 容 来 源 ” 区 域 选中 需要 的 
内 容 来 源 ， 然 后 在 下 面 的 文本 框 中 键入 相应 的 路 径 即 可 。 本 书 使 用 默认 的 本 地 路 径 。 

此 外 ， 用 户 还 可 以 在 “应 用 程序 设置 ”区 域 的 “执行 权限 ”下 拉 列 表 中 设置 应 用 程序 
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的 执行 权限 。 其 中 ，“ 无 ”表示 Web 站 点 不 支持 ASP、JSP 等 脚本 文件 ，“ 纯 脚本 ”是 指 Web 
站 点 可 以 运行 ASP、JSP 等 脚本 ; “脚本 和 可 执行 程序 ” 则 是 指 Web 站 点 除了 可 以 运行 ASP、 
JSP 等 脚本 文件 之 外 ， 还 可 以 运行 EXE 等 可 执行 文件 。 

(5) 单 击 “文档 ”页 签 切 换 到 “文档 ”选项 卡 ， 修 改 浏 览 器 默认 的 主页 及 调用 顺序 。 

(60 以 上 设置 完成 之 后 ， 单 击 “ 人 确定 ”按钮 关闭 窗口 。 

配置 IIS 服 务 器 之 后 ， 接 下 来 还 需要 测试 IIS 是 否 能 正常 运行 。 最 简单 的 方法 就 是 直接 


4s Fd o ad http: // 和 计算 机 的 下 地 址 ， 或 输入 http://Localhost， 然 后 按 Enter 键 ， 
如 果 可 以 看 到 IIS 的 缺 省 页 面 或 创建 的 网 站 的 主页 ， 则 代表 IIS 运 行 正 常 ， 否 则 ， 应 检查 计 
算 机 的 IP 地 址 是 否 设 置 正确 。 


尺 官 在 如 图 13-8 所 示 的 窗口 中 可 以 随意 设 萤 网 站 的 主 目录 ,但 是 除 非 有 必要 ， 盏 则 笔 
者 并 不 建议 直接 修改 默认 网 站 的 主 上 目录。 如 宋 不 硕 望 把 网 站 文件 存放 到 
c:\inetpub\wwwroot 目 录 下 ， 或 动态 中 所 在 的 文件 夹 不 是 主 目录 或 其 任何 子 目 录 ， 则 可 以 
通过 创建 指 癌 站 扣 文 件 夹 的 虚拟 目录 来 解决 。 

创建 IIS 的 虚拟 目录 有 两 种 方式 : 使 用 IIS 管 理 器 创建 ， 或 设置 文件 夹 的 共享 属性 。 下 
面 分 列 对 这 两 种 方法 进行 说 明 。 


[13. 4. 1 使 用 IIS 管 理 器 创建 虚拟 目录 


(1) 在 如 图 13-3 所 示 的 “Internet 信 息 服 务 ” 窗 口 左 侧 窗 格 中 的 “默认 网 站 ” 结 乓 
上 和 单 击 鼠标 右键 ， 从 弹出 的 快捷 沫 单 中 选择 “新 建 ”/“ 虚 拟 目 录 ” 命 令 ， 打 开 “ 虚 拟 目 
录 创 建 问 导 ” 对 话 框 ， 如 图 13-6 所 示 。 

(2) 单 击 “ 下 一 步 ” 按 钮 ， 在 如 图 13-7 所 示 的 弹出 窗口 的 “别名 ”文本 框 中 输入 所 
要 建立 的 虚拟 目录 的 名 称 。 


F- p— F. cr 
虚拟 目录 创建 向 导 虚拟 目 录 创 建 向 导 
欢迎 使 用 虚拟 目录 创建 向 导 虚拟 目录 别名 < 
名 必须 为 虚拟 目录 提供 一 个 简短 的 名 称 或 别名 ， 以 便于 快速 引用 。 SUE 
输入 用 于 获得 va 虚拟 目录 访问 权限 的 别名 。 使 用 的 命名 规 
此 向 导 将 帮助 您 在 网 站 上 新 建 一 个 虚拟 目录 。 则 应 与 目录 命名 规则 相同 。 
3I QD: 
| 
单 击 “ 下 一 步 ” 按钮 继续 。 
[een 取消 ET 取消 


图 13-6 “虚拟 目录 创建 问 导 ”窗口 图 13-7 输入 虚拟 目录 的 别名 


注意 : 虚拟 目录 的 别名 不 区 分 大 小 写 ， 并 且 应 唯一 。 
(30 单 击 “ 下 一 步 ” 投 钮 ， 在 弹出 的 对 话 框 中 单 击 “ 浏 览 ” 按 钮 ， 选 择 要 建立 虚拟 
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目录 的 文件 来 ， 如 图 13-8 所 示 。 

(4) 单 击 “ 下 一 步 ” 按 钮 ， 在 如 图 13-9 所 示 的 对 话 框 中 设置 虚拟 目录 的 访问 权限 。 

访问 权限 用 于 指定 用 户 通 过 浏览 器 可 以 执行 的 操作 。 

读 取 : 这 是 最 基本 的 一 个 权限 ， 允 许 用 户 访问 文件 夹 中 的 普通 文件 ， 如 HTML 文件 、 
GIF 文件 等 。 

运行 脚本 : 所 谓 的 脚本 束 是 IIS 中 可 以 执行 的 文件 ， 如 ASP 脚本 程序 等 。 

对 于 只 存放 ASP 文 件 的 目录 来 说 ， 应 该 启用 “运行 脚本 ”权限 。 对 于 既 有 ASP 文 件 ， 又 
有 普通 HTML 文 件 的 目录 ， 应 同时 启用 “ 读 取 ”和 “运行 脚本 ”权限 。 

执行 : 允许 访问 者 在 服务 器 端 运 行 CGI 或 ISAPI 程序 。 

执行 权限 通常 都 不 会 被 多 许 ， 以 免 对 服务 器 端的 计算 机 造成 不 良 影响 。 

TA: 指定 用 户 是 否 可 以 通过 浏览 器 上 传 文件 至 服务 器 的 计算 机 中 。 

浏览 : 如 果 指 定 了 该 权限 ， 则 当 用 户 没 有 特别 设置 要 读 取 站 点 的 哪 一 个 文件 时 ， 便 列 
出 目录 中 的 所 有 子 目 录 及 文件 列表 ， 以 供用 户 选 择 。 


虚拟 目录 创建 向 导 


问 权 限 
设置 虚拟 目录 的 访问 权限 。 


允许 下 列 椒 限 : 
iv MERI QD: 
: 二 duda iq... | [v 运行 脚本 Cn ASP) (8) 
* < STUDY (E:) 厂 执行 向 ISAPI 应 用 程序 或 CGI)(E) 
习 Sp HAPPY (F:) 厂 SAM 
ix o. WO 


单 击 “ 下 一 步 ” 控 钮 完成 向 导 。 


Dm, CE (8 


图 13-8 选择 要 建立 虚拟 目录 的 文件 来 图 13-9 设置 目录 访问 权限 


鉴于 站 点 安全 性 因素 的 考虑 ，“ 写 入 ”和 “浏览 ”两 项 最 好 不 要 选择 ， 除 非 有 特殊 原 
因 需 要 用 户 同 站 点 目录 号 入 内 容 或 答 看 目录 结构 。 建 议 初 学 者 采用 寺 认 设置 即 可 。 

(50 单 击 “ 下 一 步 ” 按 钮 ， 在 弹出 的 对 话 框 中 单 击 “ 完 成 ”按钮 ， 即 可 完成 虚拟 目 
录 的 创建 。 

此 时 ,在 “Internet 信 息 服务 ”和 视 口 左 侧 的 “ 堵 认 网 站 ” 结 点 下 可 以 看 到 新 创建 的 虚 
Ta Ho. 


[[113. 4. 2 设置 文件 夹 的 共享 属性 


通过 设置 文件 夹 的 Web 共 圣 属性 , 也 可 以 将 选 定 的 文件 夹 设 置 为 虚拟 目录 。 步 又 如 下 : 

(1) 在 资源 管理 器 中 ， 在 要 设置 为 虚拟 目录 的 文件 夹 上 单 击 忌 标 右 健 ， 从 弹出 的 快 
捷 玉 时 中 选择 “属性 ”命令 ， 打 开 “Web 共 至 ”选项 卡 ， 如 图 13-10 所 示 。 

(2) 选中 “共享 文件 来 ” 单 选 按钮 ， 弹 出 如 图 13-11 所 示 的 “编辑 别名 ”对 话 杠 。 在 
该 对 话 框 中 可 以 设置 该 文件 夹 的 别名 、 访 问 权 限 和 应 用 程序 权限 。 

(3) 设置 完毕 之 后 ， 单 击 “ 人 确定 ”按钮 关闭 对 话 框 。 此 时 打开 “Internet 信 息 服 务 ” 
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对 话 框 ， 可 以 在 “默认 网 站 ” 结 点 下 看 到 刚 创 建 的 虚拟 目录 。 
T— 属性 
| 常规 “| 共享 | Web 共享 | 自 定义 
&i MUNERE ] 目录 n: E : ny or k-üB0404 DWCS3* £ashi on 
共享 位 置 0 : BABET] | 33 tà): fashion 
TERES Q0 | ] 
天 加 Vries Pg 
| “| 3s An (D) ERE (RJ [] 脚 示 资源 访问 (E) 
编辑 属性 下) LSAX n0 | 目录 浏览 起) 
o: 应 用 程序 权限 
Os n 
OE ry 
总 执行 [包括 脚本 ) (2 
n 取消 应 用 QD 


图 13-10 “Web 共 圣 ”选项 卡 图 13-11 “编辑 别名 ”对 话 框 


主 目 录 和 虚拟 目录 都 是 IIS 服 务 右 的 服务 目录 ， 这 些 目 录 下 的 每 一 个 文件 都 对 应 大 一 
个 URL， 都 能 够 被 客户 访问 。 将 应 用 程序 放 在 虚拟 目录 下 有 以 下 两 种 方法 。 

(1) 直接 将 网 站 的 根 目录 放 在 虚拟 目录 下 和 面 。 

例如 ， 应 用 程序 的 根 目 孙 是 “fashion”， 下 接 将 它 放 在 虚拟 目录 下 ， 路 径 为 “[ 便 入 
4]: \Inetpub\wwwroot\fashion”。 此 时 对 应 的 URL 是 “http://localhost/fashion”。 

(2) 将 应 用 程序 目 杂 放 到 一 个 物理 目录 下 例如 ，D:\fashion) ， 同 时 用 一 个 虚拟 
目录 指 问 该 物理 目录 。 

此 时 ， 用 户 可 通过 虚拟 目录 的 URL 来 访问 它 ， 而 不 需要 知道 对 应 的 物理 目录 。 一 旦 应 
用 程序 的 物理 目录 改变 ， 只 需 更 改 虚 拟 目 录 与 物理 目录 之 间 的 映射 ， 怠 仍然 可 以 用 诛 来 的 
虚拟 目录 来 访问 它们 。 

当 用 户 在 浏览 器 地 址 柱 中 输入 一 个 URL 时 ， 例 如 http://localhost/asp/1-1l.asp， 本 
地 主机 上 的 IIS 服 务 器 首先 查找 是 否 存 在 别名 为 asp 的 虚拟 目录 ， 如 果 有 ， 束 显示 asp 虚 拟 
目录 对 应 的 实际 路 人 径 下 的 1-1. asp 文 件 ; 如 果 没 有 ， 则 查找 主 目录 下 的 asp 文 件 夹 下 的 
1-1. asp 文 件 ， 如 果 找 不 到 该 文件 ， 则 返回 出 错 信 息 。 

此 外 ， 和 初学 者 需要 注意 的 是 ， 通 过 URL 访 问 虚拟 目录 中 的 网 页 时 应 该 使 用 别名 ， 而 不 
是 目录 名 。 例 如 ， 假 设 别名 为 blog 的 虚拟 目录 对 应 的 实际 路 任 为 E:\mywork\ DWCS5\blog,， 
要 访问 其 中 名 为 index.asp 的 网 页 时 ， 应 该 在 浏览 器 地 址 栏 中 输入 
http://localhost/blog/index.asp 来 访问 ， 而 不 是 使 用 http://localhost/mywork/ 
DWCS5/ blog /index. asp 来 访问 。 太 外， 动态 网 页 文件 不 能 通过 双击 来 人 查看， 必须 使 用 浏 


呈 胡 访问 。 


在 Dreamweaver 中 ,利用 可 视 化 工具 可 以 便捷 地 开发 动态 Web 丫 点， 而 不 必 杀 手 编 写 能 

够 显示 数据 库 中 存储 的 动态 内 容 所 必需 的 复 森 编程 逻辑 。Dreamweaver 可 以 使 用 几 种 流行 
的 Web 编 程 语言 和 服务 器 拉 术 中 的 任意 一 种 来 创建 动态 Web 站 点 。 这 些 语言 和 技术 包括 
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ColdFusion、ASP 和 和 PHP 等。 

创建 一 个 动态 页 面 可 分 为 创建 静态 页 面 、 创建 动态 数据 源 、 在 静态 页 中 添加 动态 内 容 、 
添加 服务 器 行为 、 测 试 和 调试 Web 页 5 个 步骤 。 下 面 分 别 进行 说 明 。 

(1) 新 建 一 个 动态 页 面 , 并 使 用 Dreamweaver 提 供 的 设计 工具 创建 页 面 的 框架 和 布局 。 

(20 创建 数据 库 和 数据 表 ， 并 定义 提取 数据 的 记录 集 。 如 果 需 要 使 用 数据 库 ， 束 必 
须 定 义 记录 集 ， 以 便 从 数据 库 中 提取 数据 。 所 谓 记录 和 集 ， 是 从 一 个 或 多 个 表 中 提取 的 数据 
子 集 ， 一 个 记录 和 集 也 是 一 张 表 ， 这 是 因为 它 也 具有 相同 的 字段 的 记录 和 集合。 当 查 询 数据 库 
时 可 创建 一 个 记录 和 集 。 

(3) 为 页 面 对 象 绑 定 数据 ， 以 创建 动态 内 容 。 所 谓 绑 定 数据 ， 是 指使 用 DreamweaveT 
CS5 中 的 “ 绑 定 ”面板 ， 为 页 面 对 象 与 数据 库 中 存储 的 数据 建立 关联 。 

CA). 添加 服务 器 行为 。Dreamweaver 提 供 了 众多 预定 义 的 服务 器 行为 。 网 页 设计 人 员 
可 以 使 用 预定 义 的 服务 器 行为 、 也 可 以 使 用 自己 建立 的 服务 器 行为 或 使 用 其 他 人 员 建 立 的 
服务 器 行为 。 

(5) 编辑 和 调 斌 Web 页。 最 后 可 根据 需要 编辑 和 调试 Web 页 。Dreamweaver 提 供 了 3 种 
编辑 环境 : 可 视 化 编辑 环 填 、 活 动 数 据 编辑 环境 、 代 人 码 编辑 环境 。 当 然 ， 用 户 还 可 以 使 用 
其 他 的 调试 工具 进行 实时 的 跟踪 调试 。 


13. 6 诞 接 数 据 库 


在 将 数据 库 中 的 数据 绑 定 到 ASP 应 用 程序 之 前 ， 必 须 建立 一 个 数据 库 连 接 ， 人 否则 ， 
Dreamweaver 无 法 使 用 数据 库 作 为 动态 页 面 的 数据 源 。 而 在 建立 数据 库 连 接 之 前 必须 建立 
一 个 DSN 指 癌 数 据 库 的 快捷 方式 ， 它 包含 数据 库 连 接 的 一 切 信 息 。 

所 谓 建立 数据 库 连 接 ， 束 是 建立 数据 库 连 接 文件 ， 在 连接 文件 中 指明 数据 库 驱 动 程序 
和 数据 库 路 径 的 过 程 。 站 点 中 每 一 个 数据 库 都 对 应 一 个 独立 的 连接 文件 。 在 Dreamweaver 
中 创建 连接 文件 时 ， 系 统 会 将 所 有 的 连接 信息 目 动 放置 在 站 点 根 目 录 下 目 动 生成 的 
Connections X ['P3érh, 


[1113.6 1 连接 DSN 数 据 源 


存储 在 数据 库 中 的 数据 通常 有 专 有 的 格式 。Web 应 用 程序 在 试图 访问 这 种 格式 的 数据 
时 无 法 解释 这 些 数据 。 这 就 需要 在 Web 应 用 程序 与 数据 库 之 则 存在 一 个 软件 接口 ， 以 允 
许 应 用 程序 和 数据 库 互 相 进 行 通信 。 例 如 ，ColdFusion 和 JSP 应 用 程序 使 用 JDBC; ASP 
应 用 程序 使 用 ODBC. 

所 谓 0DBC， 即 开放 数据 库 连 接 COpen DataBase Connection) ， 在 不 同 的 数据 库 管 理 
系统 上 存 取 数据 。 例 如 ， 如 果 有 一 个 可 使 用 SQL 语句 存 取 数 据 库 中 记录 的 程序 ， 此 时 0DBC 
可 以 让 用 户 使 用 此 程序 直接 存 取 Microsoft Access 数 据 库 中 的 数据 。 

本 节 将 问讯 者 介绍 在 Dreamweaver 中 使 用 数据 源 名 称 (DSN) 连接 到 数据 库 的 方法 。 考 
虑 到 大 多 数 谈 者 的 试验 环境 ， 即 Web 服 务 器 与 Dreamweaver 在 同一 台 计 算 机 上 运行 ， 所 以 本 
节 介 绍 在 本 地 配置 的 情况 下 ， 如 何 创建 到 Access 数 据 库 的 连接 。 操 作 步 又 如 下 : 
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(1) 创建 一 个 Microsoft Access 数 据 库 ， 并 将 其 存放 到 网 站 相应 的 目录 下 。 

(2) 打开 Dreamweaver， 痢 建 一 个 动态 网 页 ， 或 打开 一 个 需要 连接 数据 库 的 动态 页 面 。 

(3) 选择 “窗口 ”/“ 数 据 库 ” 命 令 ， 打 开 “ 数 据 库 ” 和 面板 。 单 击 该 对 话 框 中 的 “+” 
写 按 钮 吊 ， 从 弹出 的 下 拉 采 时 选择 “数据 源 名 称 (DSN) ”命令 , 弹出 “数据 源 名 称 (DSN) ” 
对 话 框 ， 如 图 13-12 所 示 。 
注意 : 在 “数据 库 ” 面 板 中 可 以 看 到 有 4 个 步骤 ， 只 有 前 3 个 步骤 完成 了 才能 进行 创建 连接 的 操作 。 

(4) 在 “连接 名 称 ” 文 本 框 中 输入 连接 的 名 称 。 一 般 可 以 输入 “conn+ 数 据 库 名 称 ?” 
作为 连接 的 名 称 。 
Hx: 连接 名 称 中 不 能 使 用 任何 空格 或 特殊 字符 。 

(50 在 “数据 源 名 称 〈DSN) ”下 拉 列 表 框 中 选择 一 个 数据 源 名 称 。 

如 果 还 没有 定义 0DBC 数 据 源 ， 则 单 击 “定义 ”按钮 ， 在 弹出 的 如 图 13-13 所 示 的 对 话 

框 中 定义 数据 源 。 步 又 如 下 : 


数据 源 名 称 (D5H) 


连接 名 称 : | 

数据 源 名 称 DS): | 加 EX. 
用 户 名 : 

su. 


Dreamweaver 应 连接 : 〇 使 用 测试 服务 器 上 的 DSN 
(9 使 用 本 地 DSH 


图 13-12 “数据 源 名称 CDSN) ”对 话 框 
d 0DBC 数据 源 管理 器 


ICs ET. 


用 户 DSW 系统 DSN | 文件 psw| 驱动 程序 | 跟踪 | 连接 池 | 关于 | 
系统 数据 源 (3): 


ase Driver (x. dbf) 
ase VFP Driver (X. dbf) 


图 13-13 “0DBC 数 据 源 管理 器 ”对 话 框 图 13-14 “创建 新 数据 源 ” 对 话 框 


1) 切换 到 “系统 DSN” 页 面 ， 单 击 “ 添 加 ”按钮 ， 在 弹出 的 如 图 13-14 所 示 的 “创建 
新 数据 源 ” 对 话 框 中 选择 需要 的 数据 源 张 动 程序 。 本 例 选 择 “Microsoft Access Driver”。 

2) 单 击 “ 完 成 ”按钮 ， 弹 出 如 图 13-15 所 示 的 对 话 框 。 

3) 在 “数据 源 名 ”文本 框 中 键入 数据 源 的 名 称 。 在 “说 明 ” 文 本 框 中 键入 数据 源 的 
介绍 。 然 后 单 击 “选择 ”按钮 ， 在 弹出 的 “选择 数据 库 ” 对 话 框 中 选择 需要 的 数据 库 ， 并 
单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

4) 返回 到 “0DBC 数 据 源 管理 器 ”对 话 框 时 ， 读 者 可 以 发 现 新 创建 的 数据 源 名 称 。 
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(60 在 “用 户 名 ”和 “密码 ”后 面 的 文本 框 中 分 别 输入 用 户 名 及 密码 。 
CO) 选中 “使 用 本 地 DSN” 单 选 按 钮 。 


ODBC Kicrosoft Access 安装 
数据 源 名 (0D): | | 
说 明 QD) : | 
职 消 
数据 库 - 
数据 库 : 帮助 QD | ; 
WEG... | 创建 加 .| wg... | H0... | MM LE. MESS 
系统 数据 库 
* X 
C 数据 库 D: 
所 | 选项 0) >> | 


图 13-15  *ODBC Microsoft Access 安 装 ” 对 话 框 图 13-16 已 创建 的 数据 库 连 接 


(8) 单 击 “ 测 试 ” 按 钮 测试 连接 是 否 成 功 。 连 接 成 功 后 ， 单 击 “ 确 定 ” 按 钮 ， 返 回 
到 “数据 库 ” 面 板 。 
此 时 ， 在 “数据 库 ” 面 板 中 可 以 看 到 痢 建 立 的 连接 ， 如 图 13-16 上 所 示 。 
单 击 对 象 前 面 的 折 车 图标， 可 以 展开 各 项 但 看 数据 库 的 各 个 对 和 银 。 
通过 DSN 数 据 源 连接 SQL Server 数 据 库 与 连接 Access 数 据 库 相 差不多 ， 有 兴趣 的 读者 
可 以 目 行 练习 。 


[[113.6.2 自 定 义 连接 字符 蝇 


除了 使 用 DSN 数 据 源 连 接 数 据 库 以 外 ， 还 可 以 使 用 目 定 义 连接 字符 串 ,， 在 Web 应 用 程 
序 和 数据 库 之 间 创 建 ODBC 或 OLE DB 连接 。 与 IDSN 数 据 源 不 同 ， 连 接 字符 串 是 一 个 包含 
了 很 多 参数 的 字符 串 ， 其 间 用 分 号 分 割 ， 这 些 参数 包含 了 Web 应 用 程序 在 服务 器 上 连接 到 
数据 库 所 需 的 全 部 信息 。 
注意 : 由 于 0LE DB 由 微软 公司 提出 ， 所 以 只 有 Windows 2000/2003/XP 支持 。 

对 于 Access 和 SQL Server 数 据 库 ， 连 接 字 符 串 具有 如 下 语法 格式 。 

ODBC: 

Driver-i Driver (*.mdb); ;DBQ-[DSN] 

OLE DB: 

Provider-[OLE DB 
Provider];Server-|[ServerName];Database-|DatabaseName] ; UID- [User ID] ; PWD- [Passw 
ord] 

其 中 涉及 的 参数 位 要 说 明 如 下 : 

Q Provider: 该 参数 指定 数据 库 的 OLE DB 提供 程序 。 如 果 没 有 Provider 参 数 ， 则 
将 使 用 0DBC 的 默认 OLE DB 提供 程序 ， 而 且 ， 必 须 为 数据 库 指定 适当 的 0DBC 驱 动 程序 。 

下 面 分 别 是 Access、SQL Server 和 0racle 数 据 库 的 常用 0LE DB 提供 程序 的 参数 : 

Provider-Microsoft. Jet. OLEDB. 4. 0; Provider-SQLOLEDB; Provider-OraOLEDB. 
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Q Driver: 该 参数 指定 在 没有 为 数据 库 指 定 OLE DB 提供 程序 时 ， 上 所 使 用 的 0ODBC 驱 
动 程 序 。 

Q Server: 该 参数 指定 承载 SQL Server 数 据 库 的 服务 占 ， 这 种 情况 下 ， 指 Web 应 用 
程序 和 数据 库 服 务 占 ， 不 在 同一 台 服 务 占 上 运行 。 

@@ Database: iZ2X47JSQL Server 数 据 库 的 名 称 。 

e DBQ: 该 参数 为 指 癌 基于 文件 的 数据 库 《〈 如 在 Access 中 创建 的 数据 库 ) 的 路 径 。 
该 路 径 是 在 素 载 数据 库 文 件 的 服务 器 上 的 路 径 。 

e UID: 该 参数 为 连接 数据 库 的 用 户 名 。 

e PWD: 该 参数 为 用 户 密 人 码 。 

e DSN: 该 参数 为 数据 源 名 称 。 这 种 情况 ， 指 已 经 在 服务 器 上 定义 的 DSN 名 称 。 

对 于 其 他 类型 的 数据 库 ， 连 接 字 符 串 可 能 不 使 用 上 面 列 出 的 参数 ， 或 者 可 能 对 于 这 些 
参数 ， 有 不 同 的 名 称 或 用 途 。 下 面 以 连接 Access 数 据 库 为 例 ， 讲 解 使 用 连接 字符 串 连 接 数 
据 库 的 一 般 步 又。 

(1) 在 Dreamweaver 中 打开 一 个 ASP 页 面 ， 然 后 执行 “窗口 ”/“ 数 据 库 ”命令 ， 打 开 
“数据 库 ” 浮 动 面板 。 

(2) 单 击 该 面板 上 的 “添加 ”按钮 划 ， 在 弹出 的 下 拉 菜 单 中 选择 “ 自 定 义 连接 字符 
串 ” 命 令 ， 弹 出 如 图 13-17 所 示 的 “ 目 定 义 连接 字符 串 ” 对 话 框 。 


自 定义 连接 字符 囊 
ERem. 
€ 
高 级 … 
Dreamweaver 应 连接 : 〇 使 用 测 江 服务 器 上 的 驱动 程序 
- 
(9 使 用 此 计算 机 上 的 驱动 程序 
mL 


图 13-17 “ 目 定 义 连 接 字 符 串 ”对 话 框 


(3) 在 “连接 名 称 “ 文 本 框 中 输入 狐 连 接 的 名 称 。 例 如 conn2。 
(4) 在 “连接 字符 串 ” 文 本 框 中 输入 指 同 数据 库 的 连接 字符 串 。 

例如 ， 连 接 c:N\inetpub\blogN\data 目 录 下 一 个 名 为 prfoduct.mdb 的 Access 库 ， 访 库 具 
有 密码 admin， 则 应 输入 如 下 的 字符 串 : 

Provider-Microsoft. Jet. OLEDB. 4. 0; Data 
Source-c:NMinetpubWMblogWMdataNproduct.mdb;Persist | Security — Info-False; Jet 
OLEDB:Database Password-admin 

如 来 没有 在 连接 字符 串 中 指定 OLE DB 提供 程序 〈 即 ， 没 有 包含 Provider 参数 ) ， 
ASP 将 目 动 使 用 用 于 ODBC 驱动 程序 的 OLE DB 提供 程序 。 这 种 情况 下 ， 必 须 为 数据 库 指 
定 适 当 的 ODBC 驱动 程序 。 实 现 同样 功能 的 0DBC 方 式 连 接 子 符 串 如 下 : 

Driver- (Microsoft Access Driver Ck. mdb) j ; DBQ- 
c: NinetpubMblogMdataNproduct. mdb ; PWD-admin 
提示 : 初学 者 一 定 要 注意 ，Driver 和 (#. mdb) 之 间 有 个 空格 。 

如 采用 户 的 站 点 由 ISP 素 载 ， 且 不 知道 数据 库 的 完整 路 径 ， 则 要 在 连接 字符 串 中 使 
用 ASP 服务 硕 对 象 的 MapPath 方法 。 
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在 键入 连接 字符 串 时 ， 如 果 需 要 ， 可 以 单 击 “高 级 ”按钮 ， 在 弹出 的 对 话 框 中 输入 一 
个 架构 或 目录 名 称 ， 以 限制 Dreamweaver 在 设计 时 所 检索 的 数据 库 项 数 。 
注意 : 在 Microsoft Access 中 不 能 创建 架构 或 目录 。 

(5) 如 琳 在 连接 字符 串 中 指定 的 数据 库 驱 动 程序 没有 与 Dreamweaver 安装 在 同一 台 
计算 机 上 ， 请 选择 “使 用 测试 服务 器 上 的 驱动 程序 ”选项 。 

(6) 单 击 “测试 ”按钮 测试 数据 库 连 接 是 否 成 功 。 如 果 连 接 成 功 ， 单 击 “ 确 定 ” 按 
钮 ， 完 成 设置 ， 退 回 到 Dreamweaver 编 辑 界面 。 

此 时 ， 刚 才 建 立 的 连接 将 显示 在 “数据 库 ” 和 面板 中 。 在 “文件 ”和 面板 中 ， 可 以 看 到 
Dreamweaver 目 动 生成 了 一 个 名 为 Connections 的 文件 夹 , 其 中 包含 了 一 个 以 连接 名 称 命名 
的 asp 文 件 ， 这 惑 是 保存 连接 字符 串 的 地 方 。 

表面 介绍 了 使 用 DSN 数 据 源 和 目 定 义 连 接 字 符 串 两 种 方式 来 为 Web 程 序 添 加 数据 库 的 
文 持 ， 相 对 来 讲 ，DSN 数 据 源 方式 要 简单 、 快 捷 一 些 ， 而 自 定义 连接 字符 串 方式 虽然 灵活 ， 
但 较为 复杂 ， 而 且 容 易 出 错 。 读 者 可 以 根据 自己 的 喜好 选择 合适 的 连接 方式 。 


[I]113.6. 3 编辑 数据 库 连 接 


创建 数据 库 连接 以 后 , 用 户 还 可 以 随时 修改 连接 信息 , 或 删除 不 再 需要 的 数据 库 连 接 。 

编辑 数据 库 连接 的 具体 操作 方法 如 下 : 

(1) 选择 “窗口 ”/“ 数 据 库 ” 命 令 ， 打开“ 数据 库 ” 浮 动 面板 。 

(20 从 数据 库 连 接 列 表 中 选择 一 个 需要 编辑 的 连接 ， 然 后 双击 该 数据 库 连 接 的 名 称 
打开 对 应 的 数据 连接 定义 对 话 框 。 

(3) 对 数据 库 进行 必要 的 修改 后 单 击 “ 确 定 ” 按 钮 。 

编辑 数据 库 连 接 之 后 ， 必 须 及 时 更 新 页 面 中 的 内 容 。 步 又 如 下 : 

CD 选择 “窗口 ”/“ 绑 定 ” 命 令 打 开 “ 绑 定 ” 面 板 。 

(20 双击 记录 和 集 名 ， 弹 出 “记录 集 ” 对 话 框 。 从 “连接 ”下 拉 列 表 框 中 选择 修改 后 
的 连接 ， 单 击 “ 确 定 ” 按 钮 即 可 更 新 页 面 中 的 内 容 。 

如 果 要 删除 数据 库 连 接 ， 可 以 执行 以 下 操作 : 

(1) 在 “数据 库 ” 面板 中 ， 从 数据 库 连 接 列表 中 选择 一 个 需要 删除 的 连接 ， 单 击 “ 一 ” 
按钮 ， 出 现 询问 是 人 否 删除 连接 对 话 框 ， 单 击 “ 是 ”按钮 即 可 删除 该 连接 ， 如 果 单 击 “ 人 否 ” 
按钮 ， 则 取消 该 操作 ， 不 会 删除 该 数据 库 连 接 。 

数据 库 连 接 被 删除 之 后 ， 也 应 及 时 为 每 一 个 使 用 该 连接 的 页 面 指定 一 个 新 的 连接 。 

(2) 选择 “窗口 ”/“ 绑 定 ” 命 令 打 开 “ 绑 定 ” 面 板 。 

(3) 双击 记录 和 集 名 ， 弹 出 “记录 集 ” 对 话 框 。 从 “连接 ”下 拉 列 表 框 中 选择 需要 的 

连接 ， 单 击 “ 确 定 ” 按 钮 即 可 重新 连接 数据 库 。 


13. 7 十 全 数据 源 


在 一 个 站 点 中 可 能 不 止 一 个 数据 库 。 一 个 数据 库 中 叉 往 往 包含 多 个 结构 不 同 的 数据 
表 。 因 此 ， 将 动态 内 容 添加 到 页 面 中 之 前 ， 必 须 定义 一 个 数据 源 来 提供 动态 内 容 。 
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数据 源 可 以 是 记录 集中 的 一 个 域 ， 表 单 的 提交 值 ， 或 者 是 类 似 会 话 变量 或 应 用 程序 变 
量 的 服务 器 对 象 。 选 择 “ 窗 口 ”/“ 绑 定 ” 命 令 ， 在 弹出 的 “ 绑 定 ” 面 板 中 单 击 园 按 钮 ， 
从 弹出 的 下 拉 菜单 中 可 以 选择 数据 源 类 型 。 


[l13. 7. 1 定义 记录 集 


Web 页 不 能 直接 访问 数据 库 中 存储 的 数据 ， 如 末 需 要 在 应 用 程序 中 使 用 数据 库 ， 必 须 
通过 记录 集 这 个 中 介 媒 体 将 数据 库 和 网 页 应 用 程序 关联 起 来 。 记 录 集 是 针对 具体 的 数据 库 
和 动态 网 页 进行 工作 的 ， 相 当 于 一 个 临时 数据 表 ， 用 于 存放 从 数据 库 的 一 张 数 据 表 或 多 张 
数据 表 中 所 取得 的 满足 条 件 的 有 效 数 据 , 是 通过 数据 库 查 询 从 数据 库 中 提取 的 信息 (记录) 
的 子 集 ， 它 是 动态 网 页 的 直接 数据 来 源 。 

记录 和 集 由 查询 来 定义 ,查询 是 一 种 专门 用 于 从 数据 库 中 查找 和 提取 特定 信息 的 搜索 语 
^), 由 搜索 条 件 组 成 , 这 些 语句 决定 记录 集中 应 该 包含 什么 , 不 应 该 包含 什么 .Dreamweaver 
使 用 结构 化 查询 语言 SQL 来 生成 查询 。 通 过 不 同 的 SQL 语句 从 数据 库 的 一 个 表 或 者 多 个 表 中 
查询 需要 的 数据 组 成 一 个 记录 集 ， 以 满足 用 户 查 询 数 据 库 中 各 种 数据 并 应 用 在 ASP 程 序 中 
的 要 求 。 可 以 说 ， 程 序 中 所 有 得 询 数据 库 数据 的 操作 《〈 非 更 新 、 删 除 ) ， 都 是 可 以 通过 记 
录 集 来 实现 的 。 

记录 集 从 数据 源 中 获取 数据 以 后 束 断 开 了 与 数据 源 之 间 的 连接 。 当 完成 了 各 项 数据 操 
作 以 后 ， 还 可 以 将 记录 集中 的 数据 送 回 数据 源 。 由 于 Web 服务 器 会 将 记录 集 临 时 放 在 内 
存 中 ， 使 用 较 小 的 记录 和 集 将 占用 较 少 内 存 ， 所 以 ， 为 了 潜在 地 改善 服务 器 的 性 能 ， 在 定义 
记录 集 时 ， 应 尽量 包含 应 用 程序 需要 的 数据 域 和 记录 。 记 录 集 建立 完成 后 ， 在 动态 网 页 代 
但 中 会 添 加 一 个 文件 包含 语句 ， 指 定 网 页 所 使 用 的 数据 库 连 接 文 件 。 

为 了 改善 应 用 程序 的 性 能 ， 在 定义 记录 集 时 ， 应 尽量 包含 应 用 程序 需要 的 数据 域 和 记 
录 。 其 定义 的 一 般 步 又 如 下 : 

(1) 选择 “窗口 ”A/“ 文 件 ” 命 令 ， 打开 “文件 ”和 面板， 在 “文件 ”窗口 中 选中 需要 
绑 定 数据 的 文件 并 双击 该 文件 。 

(2) 选择 “窗口 ”/“ 绑 定 ” 命 令 ， 在 弹出 的 “ 绑 定 ”面板 中 单 击 天 按钮， 从 弹出 的 
下 拉 菜 单 中 选择 “记录 集 (查询 ) ”命令 ， 打开 “记录 集 ” 对 话 框 。 

(3) 在 “名 称 ” 文 本 框 中 输入 记录 和 集 的 名 称 。 

不 能 在 记录 集 名 称 中 使 用 空格 或 特殊 字符 ， 一 般 可 以 使 用 “rs+ 数 据 库 名 称 ”， 以 便 
与 其 他 对 象 区 别 开 来 。 如 fsudbookdatal。 

(4) 从 “连接 ”下 拉 列 表 框 中 选择 一 个 数据 库 连接 。 

如 条 列表 中 没有 数据 库 连 接 ， 可 以 单 击 “ 定 义 ” 按 钮 建立 一 个 数据 库 连 接 。 

(50 在 “表格 ”下 拉 列 表 杠 中， 选择 一 个 需要 的 表 。 在 “ 列 ” 选 项 的 单 选 按钮 中 选 
择 相 应 的 单 选 按 钮 。 如 果 选 择 “ 全 部 ”， 可 以 使 用 该 表 中 所 有 字段 作为 一 个 记录 集 ， 如 果 
选择 “ 选 定 的 ”， 则 可 以 按 住 Shift 键 或 Ctrl 键 选 择 多 个 列 字段 作为 一 个 记录 集 。 

(60 在 “筛选 ”选项 中 可 以 对 表 中 的 记录 进行 过 滤 。 

在 第 一 个 下 拉 列 表 框 中 选择 与 您 定义 标准 值 对 应 的 字段 。 

在 第 二 个 下 拉 列 表 框 中 选择 条 件 表达 符号 ， 使 每 一 条 记录 的 值 与 标准 值 进行 比较 。 
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在 第 三 个 下 拉 列 表 杠 中 选择 Entered Value 或 其 他 参数 ， 如 URL Parameter. Form 
Variable、Cookie、 阶 段 变 量 或 应 用 程序 变量 等 。 

在 第 四 个 文本 框 中 输入 标准 值 。 

CD) 如 果 需 要 对 记录 进行 排序 ， 可 在 “排序 ”下 拉 列 表 中 设置 对 箭 选 出 的 记录 排序 
的 方式 。 

在 第 一 个 下 拉 列 表 框 中 选择 按 哪个 字段 进行 排序 。 

在 第 二 个 列表 框 中 设置 排序 方 却 。 

(8) 在 “如 条 失败 ， 则 转 到 ” tdm dM casti 

当 由 于 菏 种 原因 而 导 任 记录 集会 询 失败 时 ， 将 重 定 问 全 该 页面 。 遂 第 显示 一 个 售 有 到 
站 点 主页 的 链接 的 错误 信息 页 面 。 

(9) 议 置 完毕 后 ， 单 击 “ 测 试 ” 按 钮 ， 然 后 输入 测试 值 ， 则 连接 到 数据 库 并 创建 数 
据 源 实例 。 如 图 13-18 所 示 。 

(100 单 击 “ 确 定 ” 按 钮 关闭 记录 集 。 


ne 
Lappk ee Fr 


图 13-18 测试 记录 集 的 结果 
如 果 需 要 修改 记录 集 ， 可 以 在 “ 绑 定 ”面板 中 选中 记录 集 ， 然 后 双击 打开 “记录 集 ” 
对 话 框 进行 修改 。 
如 果 要 删除 茶 个 记录 集 ， 选 中 该 记录 集 ， 然 后 单 击 “ 绑 定 ”面板 上 的 “- ”按钮 。 
与 编辑 数据 库 连 接 相 同 ， 修 改 或 删除 记录 集 以 后 ， 必 须 及 时 更 狐 页 面 。 


[L]13. 7. 2 定义 变量 


如 果 用 户 选择 ASP 服 务 器 技术 ， 还 可 以 创建 3 种 数据 源 : 请 求 变 量 、 阶 段 变量 和 应 用 程 
序 变 量 。 和 下面 分 别 进行 说 明 。 

使 用 数据 绑 定 面板 可 以 很 方便 地 定义 URL Variable (URL 地 址 变量 ) 、Form Variable 
(地 址 变量 ) 、Client Variable《〈 客 户 地 址 变量 ) 、 阶 段 变 量 、 请 求 变 量 以 及 应 用 程序 

.定义 请 求 变 量 

Parocia. 前 中 的 数据 中 获取 信息 。 例 如 ， 在 交互 表 
单 中 ， 用 户 输入 表单 数据 ， 然 后 单 击 “ 提 交 ” 投 钮 ， 这 些 表单 数据 将 传送 到 服务 器 靖 ， 此 
时 请 求 变量 将 获取 客户 notai 

定义 请 求 变 量 的 具体 步骤 如 下 : 

(1) X&e4& "fiL" / "927g" scar. JH "S5 E" mm. 
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(2) 单 击 “ 绑 定 ” 面 板 左上 角 的 国 按钮 ， 从 弹出 的 下 拉 菜单 中 选择 “请 求 变 量 ” 命 
令 ， 弹 出 “请 求 变 量 ” 对 话 框 。 
(3) 在 “类 型 ”下 拉 列 表 框 中 选择 请 求 变 量 的 类 型 ， 如 图 13-19 所 示 。 


E rr 
GkER 9 阶段 麦 量 @ 
名 称 : 
取消 
sem 


图 13-19 “请 求 变 量 ” 对 话 框 图 13-20 “阶段 变量 ”对 话 框 


该 下 拉 列 表 框 中 提供 了 6 种 类 型 ， 其 意义 分 别 如 下 : 
€ Request: 用 来 获取 任何 基于 HTTP 请 求 传递 的 所 有 信息 ， 包 括 从 HTML 表单 用 
POST 方法 或 GET 方法 传递 的 参数 、cookie 和 用 户 认 证 。 

€ Request. Cookie: 用 于 获取 在 HTTP 请 求 中 发 送 的 cookie 的 值 ， 或 获取 客户 端 

存储 的 Cookie 值 。 

Cookie 是 一 个 标签 ， 是 一 个 唯一 标识 客户 的 标记 。 每 个 Web 站 点 都 有 自己 的 标记 ， 
标记 的 内 容 可 以 随时 读 取 ， 但 只 能 由 该 站 点 的 页 面 完 成 。 一 个 Cookie 可 以 包含 在 一 个 会 
话 或 儿 个 会 话 之 间 某 个 Web 站 点 的 所 有 页 面 共 圣 的 信息 ， 使 用 Cookie 还 可 以 在 页 面 之 
间 交 换 信息 。 

€  Request.QueryString: 检索 HTTP 查询 字符 串 中 变量 的 值 ，HTTP 查询 学 符 串 由 

问号 后 的 值 指 定 。 

€ Request. Form: 用 于 获取 客户 问 表 单 上 所 传送 给 服务 器 问 的 数据 。 

€ Request. ServerVariable: 获取 客户 问 信 息 以 做 出 啊 应 。 

例如 : 可 以 使 用 Request. ServerVariable 'REMOTE ADDR”) 获 取 用 户 的 1P 地 址 ， 使 用 
《<%=Request. ServerVariable (“REMOTE ADDR”)%> 语 句 使 用 该 IP 地 址 。 

€  Request.ClientCertificate: 用 于 获取 客户 端的 身份 认证 信息 。 

(30 在 “名 称 ” 文 本 框 中 输入 请 求 变量 的 名 称 。 

(4) 单 击 “ 确 定 ” 按 钮 即 可 完成 操作 。 

2. 定义 阶段 变量 

使 用 阶段 变量 可 以 跟踪 客户 信息 ， 例 如 Web 页 面 注册 统计 。 在 创建 会 话 时 ， 服 务 器 会 
为 每 一 个 会 话 生 成 一 个 单独 的 标识 。 会 话 标识 以 长 整形 数据 类 型 返回 。 

单 击 “ 绑 定 ” 面 板 左 上 角 的 对 按钮 ， 从 弹出 的 下 拉 菜 单 中 选择 “阶段 变量 ”命令 ， 弹 
出 如 图 13-20 所 示 的 “阶段 变量 ”对 话 框 。 

在 “名 称 ” 文 本 框 中 输入 “阶段 变量 ”的 名 称 ， 然 后 单 击 “ 人 确定” 按钮 即 可 完成 操作 。 

例如 ， 如 果 要 使 用 阶段 变量 存储 访问 者 的 登录 ID， 并 在 网 页 中 显示 ， 则 可 以 在 “阶段 
变量 ”对 话 框 中 输入 登录 ID 的 变量 名 〈 例 如 CustomID) ， 并 单 击 “ 确 定 ” 按 钮 。 这 种 操作 
的 功能 与 在 源 代码 中 号 入 Session C'CustomID^) 的 功能 是 相同 的 。 

3. 定义 应 用 程序 变量 

使 用 应 用 程序 变量 可 以 在 给 定 应 用 程序 的 所 有 用 户 之 间 共 至 信息 ， 并 在 服务 器 运行 期 
则 持久 的 保存 数据 。 
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单 击 “ 绑 定 ”面板 上 的 国 控 钮 ， 从 弹出 的 下 拉 菜单 中 选择 “应 用 程序 变量 ”命令 ， 弹 
出 如 图 13-21 所 示 的 “应 用 程序 变量 ”对 话 框 。 


图 13-21 “应 用 程序 变量 ”对 话 框 
在 “名 称 ” 文 本 框 中 输入 应 用 程序 变量 的 名 称 ， 然后 单 击 “人 确定 ”按钮 即 可 完成 操作 。 
在 “应 用 程序 变量 ”对 话 框 中 输入 的 变量 名 与 在 源 代码 中 写 入 Application (“变量 名 “) 
的 功能 一 样 。 


建立 数据 源 之 后 ， 如 果 要 将 数据 库 中 的 记录 动态 显示 在 网 页 上 ， 只 要 将 记录 集中 的 内 
容 绑 定 到 网 页 的 相应 位 置 即 可 实现 数据 库 内 容 在 网 页 上 的 显示 。 
数据 绑 定 解决 了 服务 器 访问 数据 库 的 有 关 问 题 , 用 户 可 以 把 HTML 对 象 绑 定 到 来 自 一 个 
数据 源 的 数据 上 上 ， 当 该 页 面 补 加 载 时 ， 页 面 会 自动 从 数据 源 中 提取 数据 ， 然 后 在 该 元 素 内 
进行 格式 化 并 显示 出 来 。 在 Dreamweaver 中 ， 用 户 不 需要 编写 任何 代码 ， 只 需要 拖 动 网 页 
元 素 ， 束 可 以 插入 动态 文本 或 图 像 ， 将 它们 与 表单 对 象 、 列 表 或 其 他 网 页 对 象 相 链 接 。 
下 面 通过 一 个 简单 实例 演示 在 页 面 中 绑 定 一 个 Spry XML 记录 集 的 一 般 步 又 。 
01 在 Dreamweaver 中 狐 建 或 打开 一 个 网 页 ， 并 在 页 面 中 插入 用 于 显示 数据 的 表格 。 
本 例 在 网 页 中 插入 一 个 四 行 两 列 的 表格 ， 在 表格 的 第 一 列 分 别 输入 “编号 ”、“ 项 目 ”、 
“描述 ”和 “价格 ”。 此 时 的 页 面 效果 如 图 13-22 左 图 所 示 。 
02 将 光标 定位 在 表格 的 第 一 行 第 二 列 的 单元 格 中 ， 然 后 打开 “ 绑 定 ”面板 ， 选 中 
记录 集中 的 @id 字 段 ， 并 拖 入 表格 的 相应 位 置 ， 或 单 击 绑 定 窗口 右 下 角 的 “插入 ”按钮 。 
03. 按照 第 C20 的 方法 ， 将 记录 集中 的 其 他 字段 拖 放 到 表格 中 相应 的 位 置 。 此 时 的 
表格 如 网 13-22 右 图 所 示 。 


图 13-22 绑 定 数据 前 后 的 效果 
04. 保存 文档 。 并 按 Fl12 键 在 浏览 需 中 预览 运行 效果 。 


Dreamweaver 的 实时 数据 编辑 环境 能 够 让 网 页 设计 人 员 在 编辑 环境 中 实时 了 预 宽 可 编辑 
数据 的 Web 应 用 ， 这 样 可 以 有 效 地 提高 工作 效率 ， 减 少 重复 劳动 。 
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(1) 在 Dreamweaver 的 文档 窗口 顶部 空白 区 域 单 击 鼠 标 右 键 ， 在 弹出 的 快捷 菜单 中 选 
择 “ 浏 览 嚣 导航” 命令， 在 文档 窗口 项 部 显示 浏览 器 导航 栏 ， 如 网 13-23 所 示 。 


E33 rp Hull: £116:///2 | "SEES ES, ca£fé/index. asp 


图 13-23 ”浏览 器 导航 栏 


(20 单 击 浏 斋 天 导航 栏 最 右 侧 的 “实时 视 独 选项 ”按钮 ， 在 弹出 的 染 单 中 选择 “HTTP 
请 求 设置 …” 命 令 ， 打 开 如 图 13-24 所 示 的 实时 视图 设置 对 话 框 。 
index.asp 的 实时 祝 图 说 下 


muss. GSC] | 
ER 


: |GET v 


[v] riz SE SR E 
图 13-24 “设置 活动 数据 ”对 话 框 

在 该 对 话 框 中 ， 用 户 可 以 通过 添加 URL 请 求 ， 以 查看 动态 数据 。 

(3) 单 击 该 对 话 框 顶部 的 哇 胺 钮 ， 为 每 一 个 变量 指定 名 称 和 测试 值 。 例 如 “名 称 ” 
为 username，“ 值 ”为 vivi。 

(4) 在 “方法 ”后 面 的 下 拉 列 表 框 中 选择 网 页 递交 表单 时 的 方式 ，P0ST 或 GET。 默 认 
为 GET。 有 关 P0ST 和 GET 的 说 明 ， 读 者 可 参阅 本 书 第 9 章 9. 1. 1 和 的 内 容 。 

(5) 选中 “保存 该 文档 的 设置 ” 复 选 框 。 

(60 设置 完成 后 ， 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 

(7) 保存 文档 。 单 击 Dreamweaver 文 档 窗口 项 部 的 “实时 视图 ”按钮 ， 即 可 预览 页 面 
运行 效果 。 此 时 , 浏览 器 导航 栏 的 地 址 下 拉 列 表 中 会 出 现 指 定 的 URL 请 求 。 如 图 13-25 所 示 。 


a ^ Bi: http: //Localhost/index. asp?uzername-vivi vt E 


图 13-25 ”URL 请 求 


在 动态 网 页 中 用 到 的 动态 元 素 有 很 多 种 ， 如 动态 表单 对 象 、ActiveX 控 件 、Flash 图 像 
及 其 他 对 象 、 动 态 图 片 和 动态 文本 等 。 

在 Dreamweaver CS5 中 ， 几 乎 可 以 将 动态 内 容 放 在 Web 页 或 其 HTML 源 代码 的 任何 地 方 。 
通过 “ 绑 定 ”面板 选择 内 容 源 ， 可 以 癌 页 面 中 添加 动态 内 容 。Dreamweaver 在 页 面 的 代码 
中 插入 一 个 服务 器 端 脚本 ， 以 指示 服务 器 在 浏览 器 请 求 该 页 面 时 ， 将 内 容 源 中 的 数据 传输 
到 页 面 的 HTML 代 人 码 中 。 下 面 就 回 读 者 介绍 两 种 网 页 中 和 常用 的 动态 元 素 。 
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Dj13. 10. 1 动态 文本 


使 用 动态 文本 可 以 使 文本 在 网 页 上 滚动 、 变 换 、 隐 藏 或 显示 等 。 为 加 深 该 者 对 该 知识 
点 的 理解 ， 下 面 通过 创建 计数 器 的 实例 来 进一步 来 说 明 如 何在 网 页 中 添加 动态 内 容 。 
101. 新 建 一 个 ASP _ VBScript 文件 ， 布 局 “无 ”。 
02 在 文档 寡 口 中 输入 “欢迎 光临 我 的 个 人 主页 ， 您 是 访问 我 们 的 第 #x## 位 客户 。” 
03. 选择 “窗口 ”/“ 绑 定 ” 命 令 ， 打 开 “ 绑 定 ” 面 板 。 单 击 “ 绑 定 ” 面 板 左 上 角 的 
画 按 钮 ， 从 弹出 的 下 拉 荣 单 中 选择 “应 用 程序 变量 ”命令 。 
04 在 弹出 的 “应 用 程序 变量 ”对 话 框 中 输入 变量 的 名 称 counter， 然后 单 击 “人 确定 ” 


按钮 天 闭 该 对 话 框 。 
059 切 换 到 “文档 ”窗口 的 “代码 ”视图 ， 在 htm1? 之 前 加 入 如 下 代码 : 
<% 
Application ("counter’) -Application (/counter^) -*1 
%> 


06 1 在 文档 窗口 中 选择 “x*x**” 字 样 ， 然 后 在 “ 绑 定 ”面板 中 选择 刚才 定义 的 全 局 变 
量 ， 再 单 击 数 据 绑 定 面板 底部 的 “插入 ”按钮 。 则 “x***” 将 被 {Application. counter] i 
位 符 代 替 ， 如 图 13-26 所 示 。 


— — ' | a (E) JERRIBEIS - Microsoft Internet Explorer ooQ 
EX ES fom GAREY PRA testlasp | 4 文件 编辑 (E) m5) 收藏 外。 IR B) [9 
应 用 程 订 对 soos kvax|® 


地 址 (D) [4] http://localhost/test1 .asp it IE3 转 到 ”链接 - 


象 的 占 位 符 


Pede E STITRDI [k]é9 Q 1008  .|a93 x 178 1 K / 1 fh sd " & 本 地 Intranet 
图 13-26 ”将 记录 绑 定 到 页 面 上 图 13-27 ”实例 效果 图 
07 肯 选择“ 文件”/ “保存 ”命令 ， 将 修改 后 文档 保存 到 本 地 站 点 中 。 然 后 将 该 文件 


重新 上 传 到 远程 服务 器 上 。 

08 打开 浏览 费 ， 然 后 在 地 址 栏 中 输入 刚才 保存 文件 的 URL 地 址 ， 则 会 打开 ASP 页 面 ， 
显示 如 图 13-27 上 所 示 。 

用 户 每 单 击 一 次 “刷新 ”按钮 ， 可 以 看 到 下 面 的 计数 器 的 数值 融会 增加 1。 新 创建 的 
网 站 ， 由 于 没有 太 多 的 宣传 ， 每 天 的 访问 量 不 大 。 这 时 可 以 通过 改变 
Application( counter ) 的 数值 来 显示 较 大 的 数字 。 只 要 将 


«9 

Application ( “counter ) -Application (/counter^) -*1 
06» 

修改 为 如 下 所 示 的 代码 : 

«9 


If Application ( counter") < 999 then 
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Application ( “counter ) -999 
End If 
Application ( “counter ) -Application ( counter ) -*1 
%> 


即 可 。 这 样 当 该 网 页 被 访问 时 计数 右 的 数字 是 从 1000 开 始 。 


LL]13. 10. 2 动态 图 像 


如 果 您 经 常 在 网 上 购物 ， 可 以 发 现 每 一 个 网 页 基本 上 都 包括 一 件 商品 的 照片 和 描述 访 
商品 的 文本 ， 而 网 页 的 布局 保持 不 变 ， 经 党 变换 的 是 商品 的 照片 和 描述 该 商品 的 文本 。 使 
用 Dreamweaver 的 动态 图 像 和 动态 文本 可 以 很 轻松 地 实现 这 种 功能 ， 其 具体 的 操作 步 又 如 
T: 

(1) 新 建 一 个 文档 或 打开 一 个 需要 创建 动态 图 像 的 文档 。 

(2 将 光标 放置 在 需要 插入 动态 图 像 的 位 置 。 选择 “插入 ”/“ 图 像 ” 命令， 弹出 “ 移 
择 图 像 源 ” 对 话 框 。 

(3) 在 该 对 话 框 中 的 “从 文件 名 称 选择 ”后 面 有 两 个 单 选 按钮 ， 这 里 要 插入 动态 图 
像 ， 则 单 击 选择 “数据 源 ” 单 选 按钮 ， 此 时 对 话 框 中 会 将 数据 源 列 出 。 如 图 13-28 所 示 。 


图 13-28 “选择 图 像 源 文件 ”对 话 框 
(4) 在 数据 源 列 表 中 选择 一 个 需要 的 数据 产 。 在 URL 中 输入 数据 源 的 路 径 。 
路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 于 当前 目录 的 路 径 或 者 是 基于 根 目录 的 路 径 ， 这 
主要 取决 于 站 点 的 文件 结构 。 
(5) 设置 完成 后 ， 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 
(6) 选择 “文件 ”/“ 保 存 ” 命 令 ， 保 存 文 件 ， 并 在 浏览 器 中 预览 图 片 。 


本 下 讲 述 制 作 导 航 几 请 “我 的 店铺 ”的 链接 页 面 。 访 页 面谈 取 数 据 库 中 的 商品 数据 ， 
并 将 商品 分 页 显示 。 
01 启动 Microsoft Access 2003, 3 £&—" ^44 JJproduct. mdb 的 数据 库 。 然 后 在 弹 
出 的 对 话 框 中 双击 “使 用 设计 器 创建 表 ”, 在 打开 的 表 设 计 视 图 中 设计 表 结 构 。 如 图 13-29 
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所 示 。 
02 将 设计 的 表 保 存 为 pro。 然 后 在 弹出 的 对 话 框 中 双击 表 名 称 pro， 在 打开 的 视图 
中 添加 表 记 录 。 如 图 13-30 所 示 。 


智能 标记 pic A 
日 版 奶牛 纸巾 抽 file:///C|/Inetpub/blog/imag 
2 纸巾 套 IE-E-A n Zo E PESCE | 
3 编织 管 xXE*SMARRETRDEB/AeHDE S — file:///C|/Inetpub/blog/imag 
4 化 妆 盒 粉 蓝 化 妆 品 收纳 盒 file:yAAC|ATnetpubyblogrimag 
5 钥匙 扣 Tni je er s HERE £ile:///C |/Inetpub/blog/imag 
& 


6 组 匙 扣 人 金色 小 老鼠 钼 匙 扣 £ile:///C |/Inetpub/blog/ima 
« € 


图 13-29 ”设计 表 结 构 图 13-30 ”添加 记录 


03 9 保存 数据 表 后 ， 关 闭 Access 2003。 然 后 执行 “文件 ”/“ 新 建 ” 菜 单 命令 ， 打 
开 “ 狐 建文 档 ” 对 话 框 。 在 对 话 框 左 侧 选 择 “ 空 白 页 ”， 在 “页 面 类 型 ”列表 中 选择 “ASP 
VBScript”， 并 单 击 “ 创 建 ” 按 钮 新 建 一 个 空白 的 ASP 页 面 ， 并 保存 为 shop. aspe 

为 保持 网 站 页 面 的 统一 风格 ，shop. asp 的 页 面 布局 将 设计 为 与 其 他 HTML 页 面 一 样 的 布 

局 。 读 者 可 以 按照 前 面 讲述 的 主页 制作 过 程 重 新 设计 shop. asp 的 页 面 布局 。 一 个 简单 的 方 
法 是 将 模板 的 布局 复制 到 动态 页 面 。 步 又 如 下 : 

04 打开 index. htmnl， 将 其 另存 为 HTML 页 面 。 然 后 执行 “修改 ”/“ 模 板 ”/ * Ws 
BU AEST SEED AT e 

Index. html 是 基于 模板 新 建 的 ， 市 有 模板 标记 。 这 一 步骤 可 以 删除 代码 中 不 需要 的 模 

板 标记 ， 从 而 可 以 直接 复制 到 shop. asp 页 面 。 

051 9 切换 到 HTML 文 件 的 “代码 ”视图 ， 从 “<title>》 无 标题 文档 《</title>” 开 始 ， 选 
择 以 下 所 有 的 代码 ， 然 后 单 击 右键 ， 从 上 下 文 菜单 中 选择 “拷贝 ”命令 。 

06 切换 到 shop. asp 的 “代码 ”视图 ， 选 中 从 “<title? 无 标题 文档 </title>” 开 始 
往 下 的 所 有 代码 ， 然 后 单 击 右 键 ， 从 上 下 文采 里 中 选择 “ 精 贴 ”命令 。 此 时 ， 切 换 到 “ 设 
计 ” 视 图 ， 可 以 看 到 除 模板 标记 以 外 ，shop. asp 的 页 面 布 局 和 内 容 与 index. html 一 样 。 

07 在 正文 区 域 将 “欢迎 光临 我 的 小 屋 ” 修 改 为 “欢迎 光临 我 的 小 店 ”。 

08. 删除 正文 区 域 第 二 行 到 第 四 行 的 内 容 ， 并 切换 到 “代码 ”视图 删 际 第 四 行 单元 
格 中 的 <marquee》 标 记 。 然 后 选中 第 二 行 到 第 四 行 捍 元 格 ， 单 击 属 性 面板 上 的 “合并 单元 
格 ” 图 标 按钮 ， 将 所 选单 元 格 合并 为 一 行 。 

09 骨 在 属性 面板 上 将 合并 的 单元 格 内 容 的 水 平 对 齐 方式 设置 为 “居中 对 齐 ”， 竺 直 
对 章 方式 为 “顶端 ”， 然 后 单 击 “ 常 用 ”面板 上 的 表格 图 标 按钮 ， 在 弹出 的 “表格 ”对 话 
框 中 设置 行 数 为 2， 列 数 为 4， 表 格 宽度 为 480 像 素 ， 边 框 粗 细 为 1 像素 。 

10 选中 表格 , 在 属性 面板 上 设置 其 “填充 ”和 “间距 ” 均 为 2, 边框 颜色 为 #99CC00。 

11. 选中 第 一 行 单元 格 ， 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 方式 为 “居中 对 
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齐 ”， 了 字体 样式 为 粗 体 。 然 后 输入 需要 的 文本 内 容 。 例 如 : Sm. PoundadR. Zen. imn 
图 。 

12 肯 执行“ 窗口”/“ 数 据 库 ” 沫 单 命 令 ， 打 开 “ 数 据 库 ” 浮 动 面 板 。 单 击 面板 左上 
角 的 加 号 〈+) 按钮 ， 从 下 拉 麻 单 中 选择 “0LE DB 连接 ”选项 。 

13. 在 弹出 的 “0LE DB 连接 ”对 话 框 中 ， 输 入 连接 名 称 myconn， 然 后 单 击 “ 建 立 ” 
按钮 ， 弹 出 “数据 连接 属性 ”对 话 框 。 单 击 对 话 框 顶部 的 “提供 程序 ”页 签 ， 切 换 到 如 图 
13-31 左 图 所 示 的 对 话 框 。 

14 月 在 “0LE DB 提供 程序 ”列表 中 选择 “Microsoft Jet 4.0 OLE DB Provider" , 
然后 单 击 “ 下 一 步 ” 按 钮 切换 到 如 图 13-31 右 图 所 示 的 对 话 框 。 


15 自 输入 数据 库 的 路 径 ， 或 单 击 … 按 钮 ， 选 择 需要 连接 的 数据 库 product. mdb。 然 
后 单 击 “ 测 试 连接 ” 投 钮 测试 数据 库 是 合 能 正 利 连 接 。 

16 测试 成 功 后 ， 单 击 “ 确 定 ” 按 钮 关闭 对 话 框 。 此 时 ， 创 建 的 数据 库 连 接 将 出 现 
在 “数据 库 ” 列 表 中 。 


ET IIDD [5] 
MESA c ESED 
M TABELUTHST keesx nE 
pDokENHERNVUbEESZEQI 
| 下 | 
上 
BP EE n Adnii 
- ZrÉPSETA jt Fi ERR (EI 
T-S dp s Sum" 
| 
—- ME wm | [mw IR. wm 


图 13-31 “数据 连接 属性 ”对 话 框 


17 切换 到 “ 绑 定 ”浮动 面板 ， 单 击 面板 左上 角 的 加 号 〈+) 号 按钮 ， 从 下 拉 菜 单 中 
选择 “记录 集 (查询) ”选项 ， 打 开 “ 记 录 集 ”对 话 框 。 

18. 在 “名 称 ” 文 本 框 中 输入 记录 集 的 名 称 p_ds, 在 <“ 连接” 下拉 列 表 中 选择 “myconn ”; 
在 “表格 ”下 拉 列 表 中 选择 pro; 其 余 选项 保留 默认 设置 。 然 后 单 击 “测试 ”按钮 可 以 查 
看 建立 的 记录 集 内 容 。 

19 | 单 击 “确定 ”按钮 关闭 对 话 框 后 ， 创 建 的 记录 和 集 显 示 在 “ 绑 定 ”列表 中 。 

20. 将 光标 定位 在 表格 的 第 二 行 第 一 列 的 单元 格 中 , 然后 选中 “ 绑 定 ”面板 中 的 “ID” 
数据 项 ， 再 单 击 “ 绑 定 ”面板 底部 的 “插入 ”按钮 ， 将 所 选 数据 项 插入 到 单元 格 中 。 

21 按照 上 一 步 的 方法 ， 分 别 将 n_ame 和 t_ype 数 据 项 插入 到 第 二 行 的 第 二 列 和 第 三 
列 中 。 然 后 在 第 四 列 中 插入 一 幅 图 片 。 

22 选中 插入 的 图 片 ， 选 中 “ 绑 定 ”面板 中 的 “pic” 数 据 项 ， 然 后 在 “ 绑 定 ”面板 
底部 的 “ 绑 定 到 ”下 拉 列 表 中 选择 数据 项 绑 定 的 标签 img. srce， 并 单 击 “ 绑 定 ” 按 钮 。 此 
时 的 页 面 效 果 如 图 13-32 所 示 。 

23 汪 打开“ 服务器 行为 ”浮动 面板 ， 并 选中 表格 的 第 二 行 ， 然 后 单 击 “服务 絮 行 为 ” 
面板 左上 角 的 加 号 (+) 按钮， 在 弹出 的 下 拉 菜 单 中 选择 “重复 区 域 ” 选 项 ， 弹 出 “重复 
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区 域 ” 对 话 框 。 
24 有 在 “记录 集 ” 下 拉 列 表 中 选择 p ds， 在 “显示 ”区 域 选 中 第 一 项 ， 并 在 文本 杠 


中 输入 3， 即 每 页 显示 3 条 数据 。 此 时 的 页 面 效 果 如 图 13-33 上 所 示 。 
7  RIEEREIEREIIE 


| 595 | 产品 名称 | o; 


| liem[Demplatwu 


| ip dsID) (p. den sene) 


(p. ds.ID) | (p. ds.n ame) | 


13-32” 绑 定数 据 后 的 效果 13-33 ”重复 区 域 


25 9 将 光标 定位 在 表格 的 右 侧 ， 然 后 按 下 Shift + Enter 组 合 键 插入 一 个 软 回 车 。 
26 切换 到 “服务 器 行为 ” 面板 ， 单 击 面板 上 的 “+” 按 钮 ， 在 弹出 的 菜单 中 选择 “ 记 
录 集 分 页 ”下 的 各 个 子 染 单 选 项 ， 为 页 面 添 加 分 页 导航 。 
插入 完毕 后 的 导航 条 如 网 13-34 所 示 。 
27 调整 导航 条 表格 的 宽度 和 高 度 ， 并 将 其 中 的 链接 文本 修改 为 第 一 页 、 上 一 页 、 
P. SE s 
FL T HEEAP ALII 9 SED] n a e FJCSSEE SX e XE X. TB ZR BEPEOCASBIA ES Ig Z6, DAC Ri 
入 的 记录 集 导 航 条 的 链接 文本 也 显示 为 绿色 。 如 图 13-35 所 示 。 
——EE NEN NENNEN 


(p ds.n ame) (p dst ype) 


440 v : 
: [ELM 10 (105) v — 3 1 110 (105) v — 34 17110 : 


图 13-34 插入 的 记录 集 导 航 条 图 13-35 ”修改 后 的 记录 集 导 航 条 
28 保存 页 面 ， 开 近 F12 键 在 浏览 带 中 预 帘 页 面 效 末 。 如 图 13-36 上 所 示 。 


Q 版 奶牛 纸巾 抽 — mae 
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ue 
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图 13-36 页面 预 览 效果 


本 实例 的 记录 集中 共有 6 条 记录 ， 每 页 显示 3 条 ， 上 所 以 分 两 页 显示 。 在 第 一 页 显示 “下 
一 页 ”和 “最 后 一 页 ”链接 。 单 击 “ 下 一 页 ”链接 文本 ， 则 显示 第 二 页 ， 如 图 13-37 上 所 示 。 


252 


A E wa 
动态 网 页 基础 vb 13: 


图 13-37 页面 预 览 效果 2 


单 击 “ 第 一 页 ”或 “上 一 页 ”链接 文本 ， 可 以 切换 到 相应 的 页 面 。 
全 此 ， 个 人 网 站 实例 制作 完毕 。 
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儿 重 教育 网 站 区 WA 实例 


本 章 将 详细 介绍 在 Dreamweaver CS5 中 制作 “儿童 教 
育 网 站 ”的 具体 方法 。 本章 运用 到 了 网 页 制作 的 大 部 分 技 
术 ， 和 包括 模板 技术 、 库 项 目 、 热 点 图 像 导航 、 虚 拟 链 接 、 
邮箱 链接 等 各 种 超级 链接 、 运 用 表格 技术 进行 页 面 排版 ， 
以 及 利用 Dreamweaver CS5 中 的 Spry 界 面 窗口 部 件 Spry 
accordion 制 作 类 似 于 QQ 菜单 的 、 可 以 上 下 自由 滑动 的 菜 
单 面板 。 

通过 本 章 的 学 习 , 可 以 帮助 读者 巩固 和 加 深 对 前 面 所 
学 基础 知识 的 理解 ， 并 提高 读者 的 实践 应 用 能 
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实例 效果 
创建 站 点 
制作 系 材 
制作 页 和 面 布局 模板 
基于 模板 制作 页 面 
制作 首页 
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ASA TS c CR Ut E 1471 — Fd 14-32. 


TE BUERIHELEE SI NUES EI, seRISRAUZDtA. HR Bdu3xeR. TRSÜUBSEPLX 
本 上 ， 文 本 颜色 变 为 桔 红 色 ， 且 显示 下 划 线 。 页 面 底部 的 图 斤 同 右 滚 动 ， 当 将 忌 标 指针 移 
到 图 片上 时 ， 图 片 停止 深 动 ; 移 开 鼠标 ， 图 厂 继 续 深 动 。 

本 网 站 实例 中 的 页 面 布 局 相同 ， 例 如 其 中 一 个 信息 显示 页 面 如 图 14-2 所 示 。 左 侧 显 示 


栏目 子 标题 ， 页 面 右 侧 区 域 显 示 详 细 的 信息 列表 。 单 击 链接 文本 ， 可 以 在 关 似 的 页 面 中 打 
开 链 接 目 标 文 件 。 
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图 14-1 首页 效 末 图 14-2 UAR 
如 图 14-3 所 示 的 页 面 是 一 个 信息 反馈 页 面 。 左 侧 显 示 栏 目 子 标题 ， we 


一 个 表单 。 表 单项 采用 Spry 验 证 构件 制作 ， 当 输入 的 信息 不 满足 要 求 ， 则 提交 表单 时 会 
示 相 应 的 提示 信息 。 


对 网 站 实例 进行 仔细 规划 之 后 ， 束 需要 收集 、 制 作 需 要 的 站 点 资源 了 ， 如 LO0G0、 导 航 
条 背景 、 图 片 等 ， 并 为 这 些 素材 建立 相应 的 文件 夹 目录 。 这 些 准 备 工作 完毕 之 后 ， 接 下 来 
束 可 以 构建 站 点 了 。 本 市 将 这 些 已 有 的 文件 夹 组 织 关 一 个 站 点 。 步骤 如 下 : 

是 01 启动 Dreamweaver CS5， 执 行 【 站 点 】/【 管 理 站 点 】/【 新 建 】 命令， 打开 【站 
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图 14-3 页面 效 果 


02. 在 弹出 的 【站 点 设置 】 对 话 框 中 设置 站 点 名 称 为 education; 然后 指定 本 地 站 点 
文件 夹 的 路 人 竹 c:\inetpub\education。 

03. 单 击 【 局 级 设置 】 选 项 卡 ， 然 后 在 其 子 亲 单 中 选择 【本 地 信息 】， 在 打开 的 屏 
项 中 设置 【默认 网 像 文件 夹 】 为 c:N\inetpubN\educationNimages\。 

04 在 【链接 相对 于 】 区 域 ， 选 择 【 文 档 】 选 项 。 

05 在 【Web URL 】 后 的 文本 框 中 输入 http://127. 0.0.1/。 

06 单 击 对 话 框 中 的 【保存 】 按 钮 ， 返 回 【 站 点 设置 】 对 话 框 。 再 次 单 击 【 保 存 了】 
按钮 ， 返 回 【 站 点 管理 】 对 话 框 ， 这 时 对 话 框 里 列 出 了 刚刚 创建 的 本 地 站 点 。 

将 文件 夹 目 录 结 构 组 织 为 站 点 后 ， 即 可 以 将 磁盘 上 现 有 的 文档 组 织 当 作 本 地 站 点 来 打 

开 ， 便 于 以 后 统一 管理 。 


在 正 陈 制作 网 页 之 前 ， 需 要 先 制作 网 页 中 要 用 到 的 狗 片 、 赂 标 、 动 画 、 声 音 或 视频 等 
素材 。 本 实例 中 用 到 的 素材 制作 简单 ， 本 书 不 进行 详细 介绍 ， 主 要 介绍 一 下 制作 弹出 菜单 
和 标题 动 男 的 操作 步骤 。 


[Lli4.3.1. 制作 弹出 菜单 


01 局 动 Fireworks CS5。 执 行 【 文 件 】/【 新 建 】 命 令 ， 在 【新 建文 档 】 对 话 框 中 ， 
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将 “画布 大 小 ”设置 为 680 像 素 X50 像 素 ， 画 布 颜色 设置 为 透明 。 

02. 在 绘 风 工具 箱 中 选择 文本 工具 ， 并 在 属性 面板 上 设置 字体 为 宋体 ， 大 小 为 14， 
文本 颜色 为 黑色 。 

03. 在 画布 上 输入 导航 菜单 文本 ， 并 通过 属性 设置 面板 使 其 水 平分 布 ， 刚 好 布 满 整 
个 文档 。 效 果 如 图 14-4 所 示 。 


首页 | 宝宝 学 园 | 亲子 资源 | 师 生 风采 | 父母 学 堂 | 成 长 天 地 | 咨询 留言 | 友情 链接 | 联系 我 们 


图 14-4 设置 按钮 的 文本 标签 


04 蝇 在 绘图 工具 箱 中 选择 切记 工具 ， 在 导航 文字 上 添加 切片 ， 如 网 14-5 所 示 。 


图 14-5 为 导航 文学 添加 切片 


05 中 选中 页 耐 上 的 所 有 对 象 ， 并 复制 ， 然 后 打开 【状态 】 和 面板 ， 单 击 面 板 搬 部 的 “新 
建 / 重 制 状态 ”图 标 控 钮 ， 狐 建 一 个 状态 ， 并 执行 【编辑 】/【 粘 贴 】 命 令 ， 将 状态 1 的 内 
容 精 贴 到 状态 2 中 。 

06 生 在 绘图 工具 箱 中 选择 文本 工具 ， 选 中 状态 2 中 的 文本 ， 然 后 在 属性 面板 上 将 文子 
闫 色 修 改 为 桔 红 色 。 

0 六 返回 状态 1， 选 中 第 一 个 切片 对 象 ， 在 切片 上 单 击 足 标 右 键 ， 然 后 在 弹出 的 上 下 
文 染 单 中 选择 【添加 交换 图 像 行 为 】 命 令 ， 弹 出 如 图 14-6 所 示 的 对 话 框 。 


变换 图 像 显示 自 : 
名) 状态 编号 QD : AS 
O Bii$XPfF (D : 


[v] Thot ^ EE C2 
鼠标 称 开 时 复原 图 像 (RO 
arinissEUVIHE PBUENS. Jf [ 


图 14-6 — [STR LER Y ospite 


08. 在 对 话 框 左 上 角 的 列表 框 右 侧 单 击 要 添加 行为 的 切片 位 置 ， 然 后 选中 【状态 编 
写 】 投 钮 ， 并 在 其 右 侧 的 下 拉 列 表 中 选择 【状态 2】。 

09 9 单 击 【人 确定】 按钮 关闭 对 话 框 。 打 开 【 行 为 】 和 面板 ， 为 行为 指定 触发 事件 。 本 
例 使 用 默认 设置 ， 即 0nMouseOve。 

10 按照 第 (7) 一 《9) 步 的 操作 方法 为 其 他 切记 添加 交换 岁 像 行 为 和 触发 事件 。 

为 切 族 添加 交换 图 像 行为 之 后 ， 在 浏览 器 中 将 鼠标 指针 移 到 黑色 的 导航 文字 上 时 ， 文 
本 显示 为 村 红色 。 

11. 选中 一 个 切 厂 对 象 ， 例 如 “宝宝 学 园 ”， 在 切片 对 象 上 单 击 限 标 右键 ， 在 弹出 
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的 上 下 文 菜 单 中 选择 【添加 弹出 荣 单 】 行 为 。 

12 旧 在 【弹出 染 单 编辑 右 】 对 话 框 的 “内 容 ” 页 面 ， 添 加 二 级 或 二 级 以 上 了 和子 荣 单 项 ， 
并 为 六 时 项 指定 链接 目标 ， 以 及 目标 文件 打开 的 方式 。 

13 具 单 击 【 继 续 】 按 钮 切换 到 “外 观 ” 页 面 ， 设 置 染 单 关 型 为 垂直 沫 单 ， 字 体 为 宋 
体 ， 大 小 为 14; 文本 在 单元 格 中 的 对 章 方式 为 居中 对 章 ; 弹 起 状态 的 文本 颜色 为 黑色 ， 单 
元 格 背 景颇 色 为 白色 ; 背 过 状态 的 文本 颜色 为 日 色 ， 单 元 格 背 景 闫 色 为 村 红色 。 

14 旧 单 击 【继续 】 投 钮 切换 到 “局 级 ”页 面 ， 设 置 单 元 格 边 距 为 5， 边 框 宽度 为 1， 
边框 颜色 为 黑色 ， 阴 影 为 深 灰 色 ， 局 之 为 浅 灰 色 。 

15. 单 击 【 继 续 】 按 钮 切换 到 “人 位置” 页 面 ， 设 置 菜 单位 置 为 切片 的 展 部 ， 子 荣 单 
位 置 为 沫 单 的 右 下 部 ， 然 后 单 击 【 完 成 】 按 钮 关闭 对 话 框 。 并 打开 【行为 】 面 板 ， 为 添加 
强 出 亲 蛙 行为 指定 触发 事件 为 OnMouse0ver。 此 时 ， 男 布 上 的 对 象 如 图 14-7 所 示 。 


| 麻子 资源 | 师 生 风采 | | | 父母 学 堂 | | 成 长 天 地 | | 咨询 留言 | | 友情 链接 | | 联系 我 们 


首页 Se ipt 


图 14-7 STEHT SIEEAT ZJ ITI AICR. 


16 按照 第 〈11) — C150 步 类 似 的 方法 编辑 几 个 切 厂 的 弹出 采 蛙 。 编 辑 完 毕 ， 按 
F12 键 可 以 在 浏览 右 中 预 筑 弹出 末 蛙 的 效果 。 

17 执行 【窗口 】A【 优 化 命令 , 在 【优化 】 和 面板 的 “设置 ”下 拉 列 表 框 中 选择 【GIF 
最 合适 256]. 

18 执行 【文件 】/ 导出】 命令 ， 在 【导出 】 对 话 框 内 输入 文件 名 menu， 保 存 关 型 
为 HTML 和 图 像 ， 导 出 切片 ， 包 括 无 切片 区 域 。 所 有 文件 均 存 放 于 站 点 的 images 目 录 下 。 

19 | 设置 完毕 ， 单 击 【 保 存 】 按 钮 ， 弹 出 采 蛙 制作 完毕 。 在 制作 网 页 时 ， 可 将 导出 
的 HTML 文 件 应 用 于 Dreamweaver 中 。 


[L]14.3.2. 制作 标题 动画 


该 标题 动画 放置 在 页 面 的 项 新 作为 lo0go， 其 体制 作 步 又 如 下 : 

01. 启动 Flash CS5, 执行 【文件 】/【 新 建 】 命 令 ， 创 建 一 个 空白 的 FLA 文 档 。 

02. 执行 【修改 】A【 文 档 】 命 令 ， 在 弹出 的 对 话 框 中 将 影片 尺寸 设置 为 1020pxX 
1200px, Tix ASFFCA21. 

03. 执行 【文件 】/ 【导入 】/ 【导入 到 舞台 】 命 令 ， 在 舞台 上 导入 一 帐 背景 图 片 。 
选中 背景 网 片 ， 在 属性 面板 上 设置 其 左上 角 与 舞台 左上 角 对 章 。 

04. 新 建 一 个 向 层 ， 在 网 层 的 第 1 帆 导 入 一 幅 位 网 ， 然 后 将 导入 的 位 网 移 到 背景 向 瞩 
的 在 下 方 ， 效 末 如 网 14-8 所 示 。 

05) 按 下 Shift 键 的 同时 ， 单 击 选中 图 层 1 和 图 层 2 的 第 80 帧 ， 然 后 单 击 鼠标 右键 ， 在 
弹出 的 上 下 文康 单 中 选择 【插入 帧 】 人 命令， 将 舞台 背景 延续 到 第 80 帆 。 

06 新 建 一 个 多 层 ， 在 绘图 工具 箱 中 选择 多 角 星 形 工具 ， 并 打开 属性 面板 ， 议 置 笔 
触 颜色 无 ， 单 击 【 选 项 】 按 钮 ， 在 弹出 的 对 话 框 中 设置 类 型 为 【 星 形 】， 边 数 为 5。 然 后 
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在 舞 合 上 绘制 一 个 五 角 星 形 。 


图 14-8 图 像 效果 
07. 选中 星 形 ， 将 其 拖 放 到 舞台 右 侧 的 工作 区 中 ， 然 后 打开 【颜色 】 面 板 ， 设 置 填 


充 类 型 为 【 竹 癌 渐变 】， 将 第 一 个 闫 色 洲 标 修改 为 红色 ， 第 二 个 闫 色 游标 修改 为 贡 色 。 

08. 在 第 20 幅 单 击 鼠 标 右键 ， 从 弹出 的 上 下 文 染 单 中 选择 【转换 为 天 键 帧 】 命 令 。 
选中 绘图 工具 箱 中 的 文本 工具 ， 设 管 文 本 类 型 为 表态 文本 ， 在 舞台 上 输入 文子 “ 杀 ”。 

0999 迁 中 文本 ,执行 【修改 】/【 分 离 】 命令， 将 文本 打 若 。 然 后 打开 【 闫 色 】 和 面板 ， 
设置 填充 类 型 为 【 径 辣 渐变 】, 【 闫 色 】 和 面板 将 你 留 上 一 次 设 年 的 渐变 色 。 填 元 文子 之 后 ， 
删除 舞台 上 的 星 形 。 

10 呈 在 第 1 帧 和 第 20 帧 之 间 的 任意 一 师 上 单 击 鼠 标 右键 ， 从 弹出 的 上 下 文 菜 和 单 中 选择 

【创建 补 间 形 状 】 命 令 ， 创 建 形 状 渐变 动画 。 


单 击 时 间 轴 面板 搬 部 的 【绘图 纸 外 观 】 按 钮 ， 可 以 合 看 动画 效 坟 ， 如 图 14-9 所 示 。 
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14 9 选中 文本 ,执行 【修改 】/【 分 离 】 命令， 将 文本 打 若 。 然 后 打开 【 闫 色 】 和 面板 ， 
设置 需 充 渐变 色 为 芮 绿色 径 癌 渐变 ， 然 后 删除 舞台 上 的 星 形 。 
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15 在 第 21 巾 和 第 40 帧 之 间 的 任 总 一 帆 上 单 击 上 鼠标 右键 ， 从 弹出 的 上 下 文 末 单 中 选 
择 【 创 建 伞 间 形 状 】 命 仿 ， 创 建 形状 渐变 动画 。 

16 按照 以 上 方法 ， 再 新 建 两 个 图 层 ， 分 别 制作 “ 宇 ” 和 “ 贝 ” 的 形状 渐变 动画 。 
为 实现 文字 依次 出 现 的 效果 ，“ 宝 ”的 补 间 范围 为 第 和 帧 一 此 60 顿 ，“ 贝 ”的 补 间 郊 围 为 
第 61 帧 一 第 80 帆 。 制 作 完 成 后 的 动画 最 后 一 帧 和 时 间 轴 如 图 14-10 所 示 。 


EL 


图 14-10 动画 最 后 一 帧 及 时 间 轴 效果 


17 执行 【文件 】/ 【发 布设 置 】 这 单 命令 ， 在 弹出 的 对 话 框 中 单 击 【Flash】 选 项 
卡 ， 在 对 应 的 页 耐 中 将 JPEG 品 质 设 为 80， 导 出 版 本 为 Flash Player 10， 然 后 单 击 【确定 】 
按钮 关闭 对 话 框 。 

18 执行 【文件 】 人 导出 影片 命令 , 在 弹出 的 对 话 框 中 设置 文件 的 保存 类 型 为 【SWF 
影片 (*. swf) 】, 文件 名 称 为 1ogo. swf，，, 保存 位 置 为 C:\Inetpub\education\multimedia。 

19 执行 【文件 】/A【 保 存 】 命 令 ， 将 源 文档 你 存 为 logo. fla. 
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体 布 局 , 然后 基于 该 模板 生成 页 面 文件 。 由 于 本 网 站 实例 的 首页 布局 与 其 他 页 面 有 所 不 同 ， 
因此 本 章 将 在 最 后 单独 介绍 

制作 页 面 布 局 模板 乙 前 ， 首 先 制作 库 项 目 。 


L4. 4.1 制作 库 项 目 


本 实例 中 制作 的 库 项 目 主要 是 版 权 声 明 。 有 具体 制作 步骤 如 下 : 
01 月 动 Dreamweaver CS5， 选 择 【 窗 口 】/【 文 件 】 人 命令， 打开 【文件 】 面 板 。 
02 在 【文件 】 和 面板 左上 角 的 站 点 下 拉 列 表 中 选择 站 点 education， 并 将 站 点 视图 设 
置 为 【本 地 视图 】。 
03 打开 【 库 】 和 面板 ， 单 击 和 面板 抵 部 的 狐 建 库 项 目 按 钮 ， 输 入 库 项 目的 名 称 ， 然 后 
单 击 文档 窗口 中 的 其 他 区 域 。 
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04 双击 库 项 目 名 称 ， 在 文档 窗口 中 打开 。 然 后 在 页 面 中 插入 一 个 三 行 一 列 的 表格 ， 
表格 宽度 为 100%。 

05. 选中 表格 中 的 单元 格 , 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 和 垂直 对 齐 方式 
均 为 后 中 。 TUM E de alg 14-119 T2 - 


图 14=11 FEXdT 


06 选中 版 本 声明 中 的 邮箱 链接 文本 ， 在 属性 面板 上 的 链接 文本 框 中 输入 mailto: 
vivil230123. com. cn。 创 建 邮件 链接 。 
07. 关闭 库 项 目 编辑 窗口 
此 时 ， 即 可 在 库 面 板 中 的 库 项 目 列表 中 看 到 已 创建 的 库 项 上 (gr 
接 下 来 制作 页 面 布 局 模板 。 


[L]t4.4.2.— 制作 模板 


01 启动 Dreamweaver CS5， 选 择 【 窗 口 】/【 文 件 】 命 令 ， 打 开 【 文 件 】 面 板 。 

02 在 【文件 】 和 面板 左上 角 的 站 点 下 拉 列 表 中 选择 站 点 education， 并 将 站 点 视图 设 
置 为 【本 地 视图 】。 

03 在 【文件 】 面 板 中 单 击 鼠标 右键 ， 在 弹出 的 上 下 文 沫 单 中 选择 【新 建文 件 】 命 
令 ， 在 当前 站 点 中 新 建 一 个 HTML 文件 ， 输 入 文件 名 称 后 按 Enter 键 ， 或 单 击 文 档 窗 口 其 他 
区 域 。 然 后 在 【文件 】 面 板 中 双击 新 创建 的 文件 ， 在 文档 窗口 中 打开 该 文件 。 

04 执行 【修改 】A【 页 和 面 属性 】 命 令 ， 在 弹出 的 对 话 框 中 设置 学 体 为 宋体 、 大 小 为 
14， 颜 色 为 黑色 ， 背 景 颜 色 为 相 FCA21; 切换 到 “链接 ”页 面 ， 设 置 押 有 链接 闫 色 均 为 黑 
色 ， 链 接 文字 大 小 为 14， 且 始终 无 下 划 线 ， 然 后 单 击 【 确 定 】 按 钮 关闭 对 话 框 。 

05 在 【常用 】 面板 中 单 击 表 格 图 标 , 在 弹出 的 对 话 框 中 设置 表格 行 数 为 1， 列 数 为 1， 
表格 宽度 为 100%， 边 框 粗细 为 0， 单 元 格 边 距 和 间距 都 为 0， 无 标题 ， 然 后 单 击 【确定 】 按 
钮 ， 在 页 面 中 插入 一 个 一 行 一 列 的 表格 。 

06 选中 表格 ， 在 属性 面板 上 上 的“ 对齐” 下拉 列 表 中 选择 【居中 】， 然 后 将 光标 定 
位 在 单元 格 中 ， 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 章 方式 为 牛 中 ， 重 和 直 对 章 方式 为 项 


JN o 


07 将 光标 定位 在 单元 格 中 ， 单 击 【和 常用 】 面 板 上 的 媒体 图 标 按钮 ， 在 弹出 的 下 拉 
菜单 中 选择 【媒体 ;， SWF】 命令 ， 在 单元 格 中 插入 上 一 节 中 制作 好 的 标题 动画 。 确 保 选中 
【循环 】 和 【自动 播放 】 复 选 框 。 

08? 将 鼠标 指针 定位 在 Flash 对 象 所 在 的 表格 右 侧 ， 按 下 键盘 上 的 Shift+Enter 组 合 
键 ， 插 入 一 个 软 回 车 。 然 后 在 【常用 】 面 板 中 单 击 表格 图 标 ， 在 弹出 的 对 话 框 中 设置 表格 
行 数 为 3， 列 数 为 2， 表 格 宽度 为 872 像 素 ， 边 框 粗细 为 0， 单 元 格 边 距 和 间距 都 为 0， 无 标 
题 ， 然 后 单 击 【 确 定 】 按 钮 ， 在 页 面 中 插入 一 个 三 行 二 列 的 表格 。 
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09 选中 表格 ， 在 属性 面板 上 指定 ID 为 main。 将 光标 定位 在 第 一 行 单元 格 中 ， 单 击 
属性 面板 上 的 合并 单元 格 按钮 ， 在 弹出 的 对 话 框 中 将 第 一 行 单 元 格 合并 为 一 列 ， 然 后 在 属 
性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 方式 和 垂直 对 章 方式 均 为 后 中 。 

接 下 来 为 第 一 行 的 单元 格 新 建 CSS 规 则 ， 指 定单 元 格 背 景 图 像 。 

10 在 属性 面板 上 单 击 [编辑 规则 按钮 ,在 弹出 的 对 话 框 中 设置 选择 需 类 型 共 类】 
选择 颖 名 称 为 .boximg， 规 则 定义 的 位 置 为 【新 建 样式 表 】， 然 后 单 击 【 确 定 】 投 钮 ， 在 
弹出 的 对 话 框 中 将 样式 表 命 名 为 link. css， 且 保存 在 当前 站 点 根 日 录 之 下 。 

11. 在 弹出 的 规则 定义 对 话 框 中 ， 蛙 击 左 侧 分 类 列表 中 的 “背景 ”， 然 后 在 对 应 的 
页 面 中 单 击 【 浏 览 】 按 钮 定位 到 逢 要 的 背景 图 像 。 蛙 击 【 应 用 】 和 【人 确定】 按钮 关闭 对 话 
框 。 

此 时 ， 指 定单 元 格 中 已 应 用 指定 的 背景 图 像 。 

12 将 光标 移 到 上 一 步 定 义 背 景 图 像 的 蛙 元 格 中 ， 选 择 【 插 入 】/【 图 像 对 和 象 】/ 
[Fireworks HTML] 命令 ， 打开 【 插 入 Fireworks HTML】 对 话 框 。 单 击 【 浏 览 】 按 钮 ， 定 
位 到 14. 2. 1 市 制作 的 弹出 末 单 ， 早 击 【 确 定 】 按 钮 ， 即 可 插入 弹出 末 蛙 。 当 前 页 和 面 在 实时 
视图 中 的 效果 如 图 14-12 上 所 示 。 


- 时 a Wera'ionhl. hia sa .Dx 


rr mv s " TE limk ess manu esr ma rus memu js id 


首页 | 宝宝 EKZ | XTUE | MOEROK | S5 | 成 长 天 地 | ovp | AME | 联系 妥 们 


Übel ChaEla? CUbe de Cop? o4 boxing? TE a 433 JEK/219 Vairesde Ü(UTF-U) 
EOS 
图 14-12 页 面 效果 


当 将 鼠标 指针 移 a 到 号 航 文 池上 时 ， 显 示 弹 出 式 来 单 ， 且 文本 将 显示 为 村 红色 ， 效 末 如 
图 14-13 所 示 。 


HX | 宝宝 学 园 | 条子 资源 | MUERE | 父母 学 党 | 成 长 天 地 | edem: | AW | 联系 我 们 


图 14-13 页 面 效果 
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13 将 光标 定位 在 第 二 行 第 一 列 单元 格 中 ， 在 属性 面板 上 设置 单元 格 宽度 为 291 像 
素 ， 然 后 将 该 单元 格 拆 分 为 三 行 。 

14 选中 上 一 步 拆 分 后 的 第 二 行 单元 格 ， 将 其 拆 分 为 三 列 。 然 后 将 拆 分 后 的 第 二 列 
单元 格 拆 分 为 四 行 。 此 时 的 页 面 布局 如 图 14-14 所 示 。 


- cM pus educa ni3 htal Oo) 


SI means cis wfobjeoct modified jr link cx o mci emn jy 


首页 duck | ATUM | WIAX | £979 | 成 长 天 地 | 资源 出 言 | AE | ARE ] 
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图 14-14  WUBPSCR 
15 上 选中 单元 格 ， 在 属性 面板 上 设置 单元 格 内 容 水 平 对 齐 方式 为 元 对 齐 ， 垂 百 对 齐 
方式 为 顶端 ， 然 后 在 第 一 行 和 第 三 行 蛙 元 格 中 插入 图 像 。 
16 | 同 理 ， 在 第 二 行 第 一 列 和 第 二 行 第 三 列 的 持 元 格 中 插入 图 像 。 
17 选中 第 二 列 单元 格 ， 分 别 在 第 一 行 单元 格 和 第 三 行 的 单元 格 中 插入 网 像 。 然 后 
狐 建 一 个 CSS 规 则 ， 定 义 第 二 行 的 单元 格 的 背景 图 像 ， 且 设置 第 二 行 单元 格 的 蝇 度 为 122 像 
素 。 此 时 的 页 面 效 末 如 图 14-15 所 示 。 


CDB doc htal (XNTIQJ* ax 
SI ere cus wfobjeoct modified jr link cx m cii aen jy Yv 
464 | 9 一 5—€————Ó 1 | A —————— A €" 


首页 这 家 学 疝 了 XTN£E | WAHR | vu | REXOE | Wai | XWeie | KA] 


LI RS" WU - BT x 428 165 K / 4 1& Weiceda. (/TE-0) 


图 14-15  WUPACR 
18. 将 光标 定位 在 表格 main 的 最 后 一 行 单元 格 中 ， 单 击 属性 面板 上 的 合并 单元 格 鬼 
钮 ， 将 最 后 一 行 单元 格 合并 为 一 列 ， 并 在 属性 面板 上 设置 单元 格 内 容 水 平 对 齐 方式 和 垂直 
对 章 方式 均 为 大 中， 山上 度 为 88。 
19. 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 【新 CSS 规 划 】， 单 击 【 编 辑 规则 】 
按钮 ， 在 弹出 的 对 话 框 中 指定 选择 器 类 型 为 【类 】， 规 则 定义 在 link. css 样 式 表 中 。 单 击 
【确定 】 按 钮 ， 在 弹出 的 对 话 框 中 设 将 单元 格 的 背景 图 像 。 
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20 将 光标 定位 在 上 一 步 设置 背景 图 像 的 单元 格 中 ， 然 后 在 库 和 面板 中 选中 创建 的 版 
权 声 明 库 项 目 ， 并 单 击 面板 底部 的 【 插 和 入】 按钮 ， 将 库 项 目 添 加 到 页 面 中 。 此 时 的 页 面 效 
果 如 图 14-16 所 示 。 


.Dx 


manm j* Y 
^l 


= pubieducetion|? 
SUA eam css gwfebjact modified j* — link cess ma ett 
T | 


gano RURAL S 0 E mma ee 
TN 


图 14-16 插入 库 项 目的 页 面 效 末 
接 下 来 制作 第 二 列 的 内 容 。 


21 将 光标 定位 在 第 二 列 单元 格 中 ， 设 置 单 元 格 背景 颜色 为 白色 ， 水 平 对 齐 方式 为 
左 对 齐 ， 重 直 对 齐 方式 为 顶端 ， 然 后 执行 【插入 】/【 表 格 】 人 命令， 插入 一 个 3 行 3 列 的 表 
格 ， 且 表格 宽度 为 581 像 素 ， 边 框 、 单 元 格 边 距 和 间距 均 为 0。 

22 选中 第 一 行 的 三 列 单元 格 , 单 击 属性 面板 上 的 合并 单元 格 按钮 , 将 第 一 行 的 单元 
格 合并 为 一 行 一 列 ， 并 设置 单元 格 的 高 度 为 58。 

23 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 【新 CSS 规 则 】， 单 击 【 编 辑 规则 】 
按钮 ， 在 弹出 的 对 话 框 中 新 建 一 个 CSS 规 则 ， 规 则 定义 在 样式 表 文 件 link. css 中 ， 用 于 定 
ee 本 
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图 14-17 页面 效 打 
24 具 选中 第 三 行 的 三 列 单元 格 ， 单 击 属 性 面板 上 的 合并 单元 格 按 钮 ， 将 第 三 行 的 单 
元 格 合并 为 一 列 。 然 后 在 单元 格 中 插入 图 像 。 


25 将 忌 标 指针 定位 在 第 二 行 第 一 列 的 单元 格 中 ， 插 入 图 像 ， 同 理 ， 在 第 三 列 单元 
格 中 插入 图 像 。 此 时 的 页 和 面 效果 如 图 14-18 所 示 。 
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14-18 


px 
完毕 ， 
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页 面 效 末 


I TT TO mms m HP LUTPS PPS UTR TATE UTE UIT 0D PS UPS UTE FT IPIS UPPS OPPI TE oT ATP NT OTs IT TS ATs FP 10D OPES IPS OVP NT eT n n 


该 页 面 布局 用 于 显示 本 站 扣 实 例 中 的 栏目 内 容 。 为 


创建 风格 统一 的 负面， 可 将 该 页 面 布局 保存 为 模板 。 


26 有 将 鼠标 指针 定位 在 第 二 列 单元 格 中 ,在 属性 面板 上 设置 单元 格 内 容 水 平 对 齐 方式 
为 居中 ， 垂 直 对 齐 方式 为 顶端 ， 然 后 执行 【插入 】/【 模 板 对 象 】/【 可 编辑 区 域 】 菜 单 合 
令 ， 在 弹出 的 对 话 框 中 指定 可 编辑 区 域 的 名 称 为 content。 

27 按 照 上 一 步 的 方法 在 页 面 左 侧 的 区 域 也 添加 一 个 可 编辑 区 域 ， 命 名 为 nav。 在 栏 
目标 题 区域 添 加 一 个 可 编辑 区 域 ， 命 名 为 name。 该 可 编辑 区 域 用 于 显示 栏目 标题 。 

28 有 选中 可 编辑 区 域 hame 中 的 文字 , 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 【新 


命令 ， 


CSS 规 则 了 


dX) Pal: DS ROO] Y. TIL, dE CE XT] FERE X fT link. css 中 定义 一 


^M TERRORASA [251 Bp. dESÉISEBYASUUE xoc udErB. CEOCASA E MSUSRTS UN 
小 为 x-large， 颜 色 为 材 红 色 。 此 时 的 页 面 效 束 如 图 14-19 所 示 。 
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14-19 
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至 此 ， 横 板 文件 基本 制作 完毕 ， 接 下 来 新 建 CSS 规 则 定义 页 面 文件 中 链接 文本 的 外 观 。 


29 选择 【窗口 】/【CSS 样 式 】 命 令 ， 打 开 【CSS 样 式 】 面 板 。 


30 引 单 击 【CSS 样 式 】 面 板 底部 的 “新建 CSS 样 式 ” 按 钮 ， 在 弹出 的 对 话 框 中 设置 选择 
胡 类 型 为 【复合 内 容 】， 并 在 选择 右 名 称 下 拉 列 表 中 选择 a:1ink， 规 则 定义 在 已 创建 的 新 
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式 表 link. css 中 ， 单 击 【 确 定 】 按 钮 ， 弹 出 新 规则 定义 对 话 框 。 
31 四 在 对 话 框 中 指定 文本 闫 色 为 黑色 ， 无 修饰 。 设 置 完毕 ， 单 击 【 人 确定 】 按 钮 天 闭 
对 话 框 。 
该 规则 指定 浏览 右 中 链接 文本 的 颜色 为 站 色 ， 且 无 下 划 线 。 
32 按照 第 (30) 和 第 (31) 步 类 似 的 方法 编辑 a:hover 和 a:visited 的 CSS 样 式 。 其 
中 ，a:hover 文 本 颜色 为 棒 红 色 ， 有 下 划 线 修饰 。 选 择 喜 a:visited 的 文本 颜色 为 黑色 ， 无 
任何 修饰 。 
创建 样式 表 文 件 之 后 ， 在 制作 站 点 中 的 其 它 页 和 面 时 ,可 使 用 【CSS 样 式 】 和 面板 中 的 “ 附 
加 样式 表 ” 按 钮 将 link. css 导 入 到 其 它 页 耐 中 。 
33 月 执行 【文件 】7/ 另存 为 模板 】 人 命令， 将 访 文 件 保 存 为 当前 站 点 下 的 模板 ， 命 名 
为 bg. dwt. 


[14.4.3 制作 柑 套 模板 


在 本 网 站 实例 中 ， 有 些 网 页 文件 际 显示 内 容 及 内 容 的 多 少 相同 之 外 ， 其 他 页 面 元 素 基 
本 相同 。 因 此 ， 可 以 制作 一 个 藤 人 套 模 板 ， 在 模板 中 利用 重复 区 域 显示 页 面 内 容 。 
本 网 站 实例 使 用 的 骸 僚 模板 制作 步 又 如 下 : 
01. 打开 【资源 】 和 面板 ， 并 切换 到 【模板 】 和 面板 视图 。 
02. 在 模板 列表 中 选中 上 一 市 中 创建 的 模板 bg. dwt， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 
来 日 中 选择 【从 模板 狐 建 】 命 令 。 
基于 模板 狐 建 的 文件 有 与 模板 完全 一 样 的 页 面 布局 ， 除 三 个 可 编辑 区 域 可 以 修改 之 
后 ， 其 他 区 域 均 处 于 锁定 状态 。 
03. 删除 可 编辑 区 域 nav 中 的 文字 ， 执 行 【 插 入 】/【 模 板 对 象 】/【 重 复 表 格 】 沫 单 
命令 ， 此 时 会 弹出 一 个 提示 对 话 框 ， 提 醒 用 户 该 操作 会 将 当前 文件 转换 为 模板 。 单 击 【 确 
定 】 按 钮 弹出 如 图 14-20 所 示 的 对 话 框 。 


m 单元 格 边 中 :0 ”| 
列 : [1 ”| 单元 格 间距 : 0 ”| 
宽度 : [240 | [像素 区 
EHE: 1 | 
重复 表格 行 : 
起 始 行 : 2 结束 行 : 2 | 
区 域名 称 : RepeatRegionl | 


图 14-20 【插入 重复 表格 】 对 话 框 


04 设置 行 数 为 1， 列 数 为 1， 和 宽度 为 120 像 素 ， 边 框 为 0， 起 始 行 和 结束 行 均 为 1， 区 
域名 称 为 submenu， 然 后 单 击 【确定 】 按 钮 关闭 对 话 框 ， 即 可 在 当前 文档 中 的 可 编辑 区 域 
插入 一 个 重复 表格 。 

05 3t rne, 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 方式 为 下 对 齐 , 垂直 对 草 方 
陈 为 碳 中， 并 设置 单元 格 融 度 为 20。 

在 编辑 具体 的 页 面 内 容 时 ， 用 户 可 以 在 基于 该 模板 生成 的 页 面 文件 中 ， 根 据 再 要 创建 
£^ S NUI TB. 
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06. JR nmt DG content P ILC E. SAT. Didi 1 / DSSBoS 2&1 / DR EXE 
菜单 命令 ， 在 弹出 的 对 话 框 中 设置 行 数 为 2， 列 数 为 ?9， 宽 度 为 420 像 和 水， 起 始 行 和 结束 行 
均 为 1， 单 击 【 确 定 】 按 钮 插入 重复 表格 。 
07 呈 选中 重复 表格 ， 设 置 单元 格 内 容 水 平 对 齐 方式 为 左 对 齐 ， 垂 直 对 齐 方式 为 居中 ， 
一 行 的 单元 格 高 度 为 30， 育 景 颜 色 为 淡 粉 色 ;， 第 二 行 的 单元 格 高 度 为 20。 
08. 在 第 一 行 一 列 的 单元 格 中 输入 文本 “ID”; 选中 第 一 行 第 二 列 和 第 三 列 的 单元 
格 ， 分 别 输入 文本 “标题 ”和 “ 友 布 时 间 ”。 此 时 的 页 面 效 来 如 图 14-21 所 示 。 


L- HOO esr dad empels 
[TFT iu vehe randi fta dini jn deem NELELLLIL T 
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ET 有 n -—— 
图 14-21 ”页面 效果 


09 执行 【文件 】A【 男 存 为 模板 】 命 令 ， 将 该 文件 保存 为 当前 站 点 下 的 模板 ， 命 名 
为 content. dwt。 


Jb. WENGER. 
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[[114.5. 1. 制作 咨询 留言 页 面 


01. 打开 【资源 】 面 板 ， 并 切换 到 【模板 】 耐 板 视 图 。 

02. 在 模板 列表 中 选中 上 一 市 中 创建 的 模板 bg. dwt， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 
冰 早 中 选择 【从 模板 狐 建 】 合 令 。 

03. 删除 可 编辑 区 域 nav 中 的 文字 ， 插 入 需要 的 子 栏 目标 题 。 

04 朋 删除 可 编辑 区 域 name 中 的 文字 , 输入 栏目 标题 。 此 时 的 页 面 效果 如 图 14-22 所 示 。 

05. 删除 可 编辑 区 域 name 中 的 文字 ， 将 光标 定位 在 单元 格 中 ， 切 换 到 【表单 】 插 入 面 
板 ， 单 击 表单 图 标 按 钮 ， 在 可 编辑 区 中 插入 一 个 表单 。 选 中 表单 ， 在 属性 面板 上 的 “动作 ” 
文本 框 中 输入 mailto:vivi123@123. com. cn. 

06 将 光标 定位 在 表单 中 ， 执 行 【 插 入 】/【 表 格 】 命 令 ， 在 可 编辑 区 域 中 插入 一 个 
九 行 两 列 的 表格 ， 表 格 宽 度 为 420 像 素 ， 边 框 、 单 元 格 边 距 、 间 距 均 为 0。 

07 朋 选中 第 一 行 的 两 列 单元 格 ， 在 属性 面板 上 单 击 合 并 单元 格 按钮 ， 将 其 合并 为 一 
列 单元 格 ， 设 置 单元 格 内 容 水 平 对 齐 方式 为 左 对 齐 ， 重 直 对 齐 方式 为 居中 ,然后 输入 文字 。 
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08) 选中 第 二 行 单 元 格 的 所 有 列 ， 然 后 单 击 属性 面板 上 的 合并 单元 格 按钮 ， 将 第 二 
行 单元 格 合并 为 一 列 。 


I 22-ll L2 LLL 本 男 


图 14-22 ”页 面 效果 
09 上 用 选中 第 三 行 到 第 七 行 单元 格 ， 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 齐 方式 为 
在 对 齐 ， 垂 二 对 齐 方式 为 居中 。 然 后 在 第 一 列 单元 格 中 输入 文本 。 此 时 的 页 面 效 来 如 疼 
14-23 上 所 示 。 
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图 14-23 页面 效果 


10 肯 将 光标 定位 在 第 三 行 第 二 列 的 单元 格 中 ， 切 换 到 【和 表单】 插入 面板 ， 单 击 面板 
中 的 Spry 验证 选择 构件 。 

11 9 在 页 面 中 单 击 验 证 构件 顶部 的 蓝 色 标签 选中 该 构件 ， 在 对 应 的 属性 面板 上 设置 
不 允许 空 值 ， 然 后 在 “预览 状态 ”下 拉 列 表 中 选择 【 必 填 】。 如 图 14-24 所 示 。 


尾 性 

E? Spry 选择 不 允许 [v] en 预览 状态 | 必 十 vi 
z [] 无 效 值 验证 于 L] onBlur [DL] onChange onSubmi t 

EGER, Widget 


图 14-24  Spry3E PERPATTEXT P FE Je PE TR AR 
12 昌 在 页 面 中 单 击 验证 选择 构件 ， 调 出 对 应 的 属性 面板 ， 在 类 型 单 选 按钮 区 域 选 中 
【菜单 】， 人 然后 单 击 【列表 值 】 按 钮 ， 在 弹出 的 【列表 值 】 对 话 框 中 添加 项 目标 签 。 单 击 
对 话 框 项 部 的 加 号 按钮 可 以 诬 加 多 个 项 目标 签 。 关 闭 对 话 框 忆 后， 在 属性 面板 上 的 “初始 
时 选 定 ”列表 中 选择 默认 情况 下 显示 的 主题 标签 。 如 图 14-25 所 示 。 
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尾 性 
xi 选择 类 型 @) 菜单 如 ) 列表 值 . .. X 无 v 
selectl O958«& (D) 
Mntétbmniese Deaes- T3 
amt v 


图 14-25 选择 构件 对 应 的 属性 面板 


13 9 将 光标 定位 在 第 四 行 第 二 列 的 单元 格 中 ， 切 换 到 【表单 】 插 入 面板 ， 单 击 面板 
中 的 Spry 验证 文本 域 构件 。 单 击 文 本 域 构件 顶部 的 监 色 标签 选中 该 构件 ， 在 对 应 的 属性 
面板 上 设置 预览 状态 为 【 必 填 】， 最 小 字符 数 为 4， 最 大 字符 数 为 20。 

14 肯 切换 到 文本 域 属 性 面板 ,设置 字符 宽度 为 24,， 最 多 字符 数 为 20,， 类 型 为 【单行 】。 

15 肯 将 光标 定位 在 第 五 行 第 二 列 的 单元 格 中 ， 单 击 【 表 单 】 面 板 中 的 Spry 验证 文本 
域 构件 。 在 Spry 文 本 域 属性 面板 上 设置 最 小 字符 数 为 2， 最 大 学 符 数 为 10， 预 筑 状 态 为 【 初 
始 】; 切换 到 文本 域 属 性 面板 ， 设 置 字符 宽度 为 12， 最 多 字符 数 为 10， 类 型 为 【单行 】。 

16. 将 光标 定位 在 第 六 行 第 二 列 的 单元 格 中 ， 单 击 【 表 单 】 面 板 中 的 Spry 验证 文本 
域 构 件 。 在 Spry 文 本 域 属性 面板 上 的 “类 型 ”下 拉 列 表 中 选择 【电话 号 码 】， 格 式 为 【 自 
定义 模式 】， 预 览 状态 为 【 必 填 】， 并 在 “提示 ”文本 域 中 输入 010-12345678; 切换 到 文 
本 域 属 性 面板 ， 设 置 字符 宽度 为 14， 最 多 字符 数 为 13， 类 型 为 【单行 】。 

17 将 光标 定位 在 第 七 行 第 二 列 的 单元 格 中 ， 单 击 【 表 单 】 面 板 中 的 Spry 验证 文本 
域 构件 。 在 Spry 文 本 域 属性 面板 上 的 “类 型 ”下 拉 列 表 中 选择 【电子 邮件 地 址 】， 预 览 状 
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图 14-26 页 面 效果 


18 自 选中 第 八 行 的 所 有 列 ， 单 击 属性 和 面板 上 的 合并 单元 格 按钮 ， 将 第 八 行 单元 格 合 
并 为 一 列 。 

19 同样 的 方法 合并 第 九 行 单元 格 ， 并 在 属性 面板 上 设置 单元 格 内 容 水 平 对 章 方式 
和 垂下 对 章 方式 均 为 后 中 。 人 然后 在 单元 格 中 插入 两 个 按钮 。 

20 | 选中 第 一 个 按钮 ， 在 属性 面板 上 设置 其 值 为 “提交 ”， 动 作为 【提交 表单 】; 
选中 第 二 个 投 钮 ， 在 属性 面板 上 设置 值 为 “取消 ”， 动 作为 【重症 表单 】。 

21， 将 光标 定位 在 第 一 行 单元 格 中 ， 在 属性 面板 上 设置 其 高 度 为 80; 选中 其 他 几 行 
单元 格 ， 在 属性 面板 上 设置 其 高 度 为 30。 此 时 的 页 面 在 实时 视图 中 的 预览 效果 如 图 14-27 
所 示 。 

全 此 ， 咨 询 留 言 矶 而 制作 完毕 。 
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图 14-27 页面 效果 


Li4.5.2 制作 信息 显示 页 面 


该 页 面 的 布局 是 本 网 站 实例 中 很 典型 的 一 个 页 面 ， 堪 侧 显 示 导 航 子 沫 单 ， 右 侧 显 示 相 
天 的 信息 。 本 网 站 实例 中 绝 大 多 数 的 显示 布局 与 此 相同 ， 不 同 的 是 显示 的 内 容 和 内 容 条 目 
的 多 少 。 本 页 面 将 基于 骨 套 模板 制作 。 具 体制 作 步 又 如 下 : 

01: 打开 【资源 】 和 面板 ， 并 切换 到 【模板 】 和 面板 视图 。 

02 自 在 模板 列表 中 选中 己 创 建 的 租 套 模板 contenet. dwt， 单 击 鼠 标 右键 ， 在 弹出 的 
快捷 末 单 中 选择 【从 模 析 新建】 命令。 基于 藤 合 模板 生成 的 页 面 效 果 如 图 14-28 所 未 。 


(rpm. 


SEAT amm cii  mafebjaciomodifqaà jy — link ees — ma cir gara. jr " 


LIP ID OI uiui 


E... 


* Hg) MUT "Hle 
m dae ix E zd) 


图 14-28 页面 效 果 


03 几 删除 可 编辑 区 域 nane 中 的 文字 ， 揪 入 需要 的 栏目 标题 ， 例 如 “宝宝 学 园 ”。 

04 在 页 面 左 侧 的 重复 表格 区 域 的 可 编辑 区 域 中 ， 输 入 栏目 子 标 题 。 如 果子 标题 多 
于 一 个 ， 则 单 击 重复 表格 右上 角 的 加 号 按钮 ， 添 加 多 个 可 编辑 的 单元 格 ， 然 后 输入 文本 ， 
并 为 文本 指定 链接 目标 ， 以 及 链接 目标 文件 打开 的 方式 。 

如 果 要 删除 某 个 重复 单元 格 ， 则 单 击 重复 表格 右上 角 的 减 写 按钮 ， 如 果 要 调整 午 复 单 
元 格 在 表格 中 的 显示 位 置 ， 则 单 击 右上 角 的 同上 或 癌 下 的 三 角形 按钮 。 

05 按照 上 一 步 的 方法 在 页 面 右 侧 的 重复 表格 中 输入 文本 , 并 为 文本 指定 链接 目标 和 
目标 打开 的 方式 。 此 时 的 页 面 效 果 如 图 14-29 所 示 。 
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图 14-29 页 面 效果 
该 页 面 在 实时 视图 中 的 预览 效果 如 图 14-30 所 未 。 
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图 14-30 页 面 效果 
由 于 在 模板 文件 中 定义 了 链接 文本 显示 为 黑色 ， 且 无 下 划 线 修饰 ， 因 此 在 浏览 磺 视 图 


中 显示 的 链接 文本 与 普通 页 面 文本 相同 。 当 鼠标 指针 移 过 链接 文本 时 ， 文 本 将 显示 为 桔 红 


色 ， 且 显示 下 划 线 ， 表 明 这 是 一 个 链接 文本 。 
06. 3A4T LX fF1 / 保存】 命令， 将 文档 保存 在 当前 站 点 目录 中 。 
07. JRRRTS CIO 一 第 〈6) 步 的 操作 方法 制作 其 他 类 似 的 页 面 。 


本 网 站 实例 首页 的 其 体制 作 步 又 如 下 : 

01 9 启动 Dreamweaver CS5， 选 择 【 窗 口 】/【 文 件 】 命 令 ， 打 开 【 文 件 】 面 板 。 

02. 在 【文件 】 面 板 左 上 和 角 的 站 点 下 拉 列 表 中 选择 站 点 education， 并 将 站 点 视图 设 
置 为 【本 地 视图 】。 

03 肯 在 【文件 】 面 板 中 单 击 鼠标 右键 ， 在 弹出 的 上 下 文 染 单 中 选择 【新 建文 件 】 命 
令 ， 在 当前 站 点 中 新 建 一 个 HTML 文件 ， 输 入 文件 名 称 后 按 Enter 键 。 然 后 在 【文件 】 面 板 
中 双击 新 创建 的 文件 ， 在 文档 窗口 中 打开 该 文件 。 

04 在 【党 用 】 和 面板 中 单 击 表格 图 标 ， 在 弹出 的 对 话 框 中 设置 表格 行 数 为 1， 列 数 为 
1， 表 格 宽度 为 100%， 边 框 粗细 为 0， 单 元 格 边 距 和 间距 都 为 0， 无 标题 ， 然 后 单 击 【 确 定 】 
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按钮 ， 在 负面 中 插入 一 个 一 行 一 列 的 表格 。 

05 用 选中 表格 ， 在 属性 面板 上 的 “对 齐 ” 下 拉 列 表 中 选择 【居中 】， 然 后 将 光标 定位 
在 单元 格 中 , 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 章 方式 为 大 中 , 垂直 对 齐 方式 为 顶端。 

06 将 光标 定位 在 单元 格 中 ， 单 击 【 常 用】 和 面板 上 的 娩 体 图 标 按钮 ， 在 弹出 的 下 拉 
亲 蛙 中 选择 【 巡 体 :SWE】 命 令 ， 在 单元 格 中 插入 上 一 广 中 制作 好 的 标题 动画 。 确 你 选中 
【循环 】 和 【 目 动 播放 】 复 选 框 。 

单 击 属性 面板 上 的 【播放 】 按 钮 ， 可 以 预 唤 动画 效 来 ， 如 图 14-31 所 示 。 


DW me Oe Àe a; 11 3] OQ sw (aisi 
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图 14-31 ”预览 S 呈 文件 效果 


07. 选中 插入 的 媒体 对 象 , 在 属性 面板 上 设置 其 相对 于 页 和 面 的 对 齐 方式 为 居中 对 齐 。 
然后 将 鼠标 指针 定位 在 Flash 对 象 右 侧 ， 按 下 键盘 上 的 Shift+Enter 组 合 键 ， 插 入 一 个 软 回 
Dre 

08. 在 【第 用 】 面 板 中 单 击 表格 网 标 ， 在 弹出 的 对 话 框 中 设置 表格 行 数 为 3， 列 数 为 
3， 表 格 宽 度 为 880 像 素 ， 边 框 粗 细 为 0， 单 元 格 边 距 和 间距 都 为 0， 无 标题 ， 然 后 单 击 【 确 
定 】 投 钮 ， 在 页 面 中 插入 一 个 三 行 三 列 的 表格 。 

09 选中 表格 ， 在 属性 面板 上 将 其 命名 为 maincontent， 并 在 “对 齐 ” 下 拉 列 表 中 选 
择 【 居 中 对 齐 】。 

10 肯 选中 第 一 行 单 元 格 ， 单 击 属 性 面板 上 的 合并 单元 格 按钮 ， 将 第 一 行 单元 格 合并 
为 一 列 ， 然 后 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 章 方式 和 牌 直 对 齐 方 式 均 为 后 中 。 

1199 打开 【 CSS 样式] 面板 , 单 击 和 面板 搬 部 的 附加 样式 表 文 件 图 标 按钮 , 打开 如 图 14-32 
所 示 的 对 话 框 。 

12. 单 击 【浏览 】 按 钮 ， 定 位 到 14. 3 节 创 建 的 样式 表 文 件 1ink. css。 添 加 方式 选择 
【链接 】， 然 后 单 击 【确定 】 按 钮 ， 将 样式 表 文 件 链接 到 当前 文件 中 。 

131 将 光标 定位 在 第 一 行 蛙 元 格 中 ， 然 后 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 
选择 14. 3.2 节 中 己 定 义 的 规则 ， 为 指定 单元 格 指定 背景 图 像 。 

14 将 光标 移 到 上 一 步 定 义 痛 景 图 像 的 单元 格 中 ， 选 择 【 插 入 】/【 图 像 对 和 象 】/ 
[Fireworks HTML] 命令 ， 打开 【 插 入 Fireworks HTML】? 对 话 框 。 单 击 【 浏 览 】 按 钮 ， 定 
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位 到 14. 2. 1 节制 作 的 弹出 表单 ， 单 击 【 确 定 】 按 钮 ， 即 可 插入 弹出 菜单 。 

15 选中 第 二 行 第 一 列 单元 格 ， 单 击 属性 面板 上 的 拆 分 单元 格 按 钮 ， 将 单元 格 拆 分 
为 七 行 。 然 后 将 拆 分 后 的 第 一 行 单 元 格 拆 分 为 两 列 。 

16 选中 拆 分 后 的 第 一 列 单元 格 ， 在 属性 面板 上 将 其 宽度 设置 为 39 像 素 ， 设 置 单 元 
格 内 容 的 水 平 对 章 方式 为 左 对 齐 ， 垂 和 直 对 章 方式 为 顶端 ， 然 后 执行 【插入 】/ EFE] ds 
令 ， 在 单元 格 中 插入 图 像 ， 如 图 14-33 所 示 。 
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Dreamweaver 的 范 便 样 式 表 可 以 帮助 您 起 步 。 


图 14-32 【链接 外 部 样式 表 】 对 话 框 图 14-33 ”页面 效果 

17 将 鼠标 指针 定位 在 第 二 列 单元 格 中 ， 在 属性 面板 上 设置 表格 宽度 为 242 像 素 ， 单 
元 格 内 容 的 水 平 对 章 方式 为 居中 ， 王 直 对 齐 方式 为 项 问 。 然 后 执行 【插入 】/【 表 早 】 合 
令 ， 在 单元 格 中 插入 一 张 表格 。 

18， 单 击 【 和 利用】 面板 上 的 表格 网 标 ， 在 弹出 的 对 话 框 中 设置 表格 行 数 为 4， 列 数 为 
1， 宽 度 为 100%， 单 击 【 和 确定】 按钮 插入 一 张 5 行 1 列 的 表格 ， 并 在 属性 面板 上 将 单元 格 的 
背景 颜色 修改 为 日 色 。 

19 选中 表格 的 第 一 行 ， 在 属性 面板 上 设置 单元 格 内 容 的 水 平 对 章 方式 的 王 百 对 章 
方式 均 为 居中 ， 人 然后 执行 【插入 】/【 图 像 】 命 令 ， 插入 一 张 位 图 。 

20 将 第 二 行 和 第 三 行 单 元 格 内 容 的 水 平 对 齐 方式 设置 为 左 对 齐 ， 王 和 对 齐 方式 为 
居中 ， 然 后 插入 文本 。 

21 切换 到 【表单 】 插 入 和 面板 ， 在 文本 后 面 分 别 插 入 一 个 文本 字段 。 选 中 文本 字段， 
在 属性 面板 上 设置 学 符 客 度 和 最 多 字符 数 ， 量 第 一 个 文本 字段 类 型 为 单行 ， 第 二 个 文本 子 
段 类 型 为 密码 。 

22 设置 巷 套 表格 中 的 第 四 行 单元 格 内 容 的 水 平 对 章 方式 的 垂直 对 章 方式 均 为 后 中 ， 
然后 插入 两 个 投 钮 。 选 中 第 一 个 按钮 ， 在 属性 面板 上 修改 其 值 为 “登录 ”， 动 作为 【提交 
表单 】; 选中 第 二 个 按钮 ， 在 属性 面板 上 修改 其 值 为 “取消 “， 动 作为 【 重 置 表单 】。 

23 选 中 骸 食 表格 的 最 后 一 行 ， 设置 单元 格 内 容 的 水 平 对齐 方 式 为 右 对 章 ， 王 直 对 齐 
方式 为 居中 ， 然 后 输入 文本 。 

此 时 的 页 和 面 效 果 如 图 14-34 所 示 。 

24 选中 表单 下 的 第 二 行 单元 格 ， 在 属性 面板 上 将 其 背景 色 修改 为 日 色 ， 局 撒 为 3， 
水 平 对 齐 方式 为 左 对 齐 ， 垩 直 对 章 方式 为 项 新 ， 然 后 执行 【插入 】/【 图 像 】 命 令 ， 插 入 
/| 
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25 选 中 第 三 行 单元 格 ， 在 属性 面板 上 设置 育 景 颜色 为 日 色 ， 然 后 将 其 拆 分 为 两 列 ， 
此 一 列 的 宽度 为 36， 水 平 对 齐 方 式 为 左 对 齐 ， 垩 直 对 齐 方 式 为 顶端 ， 第 二 列 的 背景 闫 色 为 
白色 。 然 后 分 别 插入 图 片 。 些 时 的 页 面 效 末 如 图 14-35 所 示 。 
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26 | 选中 第 四 行 单元 格 ， 在 属性 面板 上 将 其 拆 分 为 两 列 ， 第 一 列 的 宽度 为 36， 水 平 对 
章 方式 为 左 对 齐 ， 垂 直 对 齐 方式 为 顶端 ， 然 后 在 第 一 列 插入 图 片 。 

27 选中 第 二 列 的 单元 格 ， 将 其 拆 分 为 三 行 ， 并 将 拆 分 后 的 第 二 行 拆 分 为 两 列 ， 然 后 
分 别 插入 图 片 ， 此 时 的 页 面 效果 如 图 14-36 所 示 。 

28] 选 中 第 五 行 单元 格 ， 在 属性 面板 上 设置 高 度 为 26， 背 景 颜色 为 白色 ,水 平 对 章 方 
式 为 左 对 齐 ， 重 直 对 齐 方式 为 顶端 ， 然 后 插入 图 片 。 

29 将 第 六 行 的 背景 颜色 设置 为 白色 ， 并 拆 分 为 三 列 ， 第 一 列 的 宽度 为 39， 水 平 对 章 
方式 为 左 对 齐 ， 垂 直 对 章 方式 为 顶端 ， 然 后 插入 图 片 。 将 第 二 列 拆 分 为 两 行 ， 然 后 分 别 插 
入 图 片 和 文字 。 最 后 在 第 三 列 插入 图 像 。 

50 选中 输入 的 文本 ， 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 【新 CSS 规 则 】， 
然后 单 击 【 编 辑 规则 】 按 钮 ， 在 弹出 的 对 话 框 中 指定 选择 器 类 型 为 【类 】， 规 则 定义 在 
Link. css 样 式 表 中 。 单 让 [确定 按钮 , 在 弹出 的 对 话 框 中 设置 字体 为 隶书 , 大 小 为 x-large， 
颜色 为 蓝 色 。 此 时 的 页 面 效果 如 图 14-37 所 示 。 
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图 14-36 页面 效 果 图 14-37 ”页面 效果 
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此 时 ， 读 者 会 发 现 ， 尽 管 已 将 表格 的 边框 设置 为 0， 但 在 实时 视图 中 预览 页 面 效 果 时 ， 
表格 边框 所 在 的 区 域 仍然 显示 页 面 的 背景 闫 色 ， 而 不 是 指定 的 单元 格 背 景 闫 色 。 

事实 上 ， 在 Dreamweaver 中 ， 如 果 用 户 没 有 明确 指定 单元 格 边 距 、 间 距 的 值 ， 
Dreamweaver 将 默认 以 边 距 和 间距 为 1 显示 表格 。 因 此 ， 用 户 只 需要 选中 表格 ， 并 在 属性 面 
板 上 将 单元 格 边 距 、 间 距 明确 指定 为 0， 即 可 解决 该 问题 。 

31 有 选中 第 七 行 单 元 格 ， 设 置 单元 格 内 容 水 平 对 齐 方式 为 左 对 齐 ， 重 直 对 齐 方式 为 
顶端 ， 高 上 度 为 260， 单 元 格 背 景 颜色 为 白色 ， 然 后 在 单元 格 中 插入 网 像 。 

32 由 选中 表格 maincontent 的 最 后 一 行 ， 合 并 单元 格 ， 设 置 单元 格 内 容 水 平 对 齐 方式 
和 垂直 对 章 方式 均 为 后 中 ， 高 上 度 为 88， 然 后 在 属性 面板 上 的 “目标 规则 ”下 拉 列 表 中 选择 
14. 3.2 节 创建 的 CSS 规 则 ， 设 置 蛙 元 格 的 背景 图 像 。 此 时 的 页 面 效 果 如 图 14-38 所 示 。 
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图 14-38 页面 效 麻 


33 旧 将 光标 定位 在 文档 窗口 最 后 一 行 单元 格 中 ， 人 然后 在 库 面 板 中 选中 创建 的 库 项 目 ， 
并 单 击 和 面板 抵 部 ped iiid 将 库 项 目 座 加 到 页 面 中 。 E Duis 39 所 未 。 
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图 14-39 页面 效 条 


接 下 来 制作 中 间 列 的 内 容 。 

019 选中 第 二 列 的 单元 格 ， 设 置 单元 格 背 景 闫 色 为 白色 ， 单 元 格 内 容 水 平 对 章 方式 
为 下 对 齐 ， 垂 百 对 章 方式 为 项 只。 然后 在 其 中 藤 套 一 个 两 行 两 列 ， 宽 度 为 591 像 素 ， 单 元 
格 间距 和 边 距 均 为 0 的 表格 。 

0299 选 中 髓 僚 表 格 的 第 二 行 的 所 有 单元 格 ， 在 属性 面板 上 单 击 合 并 竺 元 格 命令 ， 将 
其 合并 为 一 个 单元 格 ; 选中 第 一 行 一 列 的 单元 格 ， 在 属性 面板 上 将 第 一 列 宽 度 设 置 为 299 
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像素 ， 第 二 列 客 度 为 292， 单 元 格 背 景 闫 色 为 白色 。 此 时 的 页 面 效 果 如 图 14-40 所 示 。 
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图 14-40 ”页 面 效 末 
03 在 第 一 行 一 列 的 表格 中 骸 僚 一 个 表格 ， 表 格 行 数 为 6， 列 数 为 1， 宽 度 为 100%。 


日 在 属性 面板 上 设置 表格 中 所 有 单元 格 内 容 的 水 平 对 齐 方式 为 起 对 齐 ， 垂 且 对 齐 为 顶端 。 
04 昌 选中 骨 套 表格 的 第 一 行 、 第 三 行 和 第 五 行 ， 在 单元 格 中 插入 图 像 。 此 时 的 页 面 
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图 14-41 页面 效 琳 

05 选中 第 二 行 的 单元 格 ， 在 属性 面板 上 指定 单元 格 高 度 为 116， 然 后 单 击 属性 面板 
上 的 【编辑 规则 ]】 按 钮 ,在 弹出 的 对 话 框 中 指定 选择 需 关 型 为 【类 】,， 规则 定义 在 link. ess 
样式 表 文 件 中 。 单 击 【 确 定 】 按 钮 ， 在 弹出 的 对 话 框 中 指定 单元 格 的 背景 图 像 。 

06. 按照 上 一 步 的 方法 ， 为 第 四 行 和 第 六 行 的 单元 格 设置 背景 图 像 ， 且 单元 格 高 度 
分 别 为 115 和 112。 完 成 后 的 页 面 效 末 如 岁 14-42 所 示 。 

07 生 选中 第 三 列 的 单元 格 ， 设 置 蛙 元 格 背 景 闫 色 为 白色 ， 单 元 格 内 容 水 平 对 齐 方式 
为 左 对 章 ， 秋 下 对 齐 方式 为 项 咽 。 然 后 在 其 中 骸 套 一 个 六 行 一 列 的 表格 ， 宽 度 为 100%， 单 
元 格 间距 和 边 距 均 为 0 的 表格 。 

08. 迁 中 极 套 表格 第 一 行 的 单元 格 ， 在 单元 格 中 插入 图 像 。 同 理 ， 在 第 三 行 、 第 四 
行 、 第 六 行 插 入 图 像 。 

09 9 将 光标 定位 在 第 二 行 单元 格 中 ， 早 击 属性 面板 上 的 拆 分 按钮 ， 将 其 拆 分 为 三 列 。 
然后 选中 拆 分 后 的 第 二 列 单 元 格 ， 将 其 拆 分 为 两 行 。 
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选中 第 二 行 第 二 列 的 单元 格 ， 插 入 图 像 。 此 时 的 页 面 效果 如 图 14-43 所 示 。 
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图 14-43 页 面 效果 


11 选中 第 五 行 的 单元 格 ， 单 击 属性 面板 上 的 拆 分 按钮 ， 将 其 拆 分 为 三 列 ， 然 后 分 
别 在 第 一 列 和 第 三 列 中 插入 图 像 。 

12 旧 将 光标 定位 在 库 项 目 上 端的 单元 格 中 ， 单 击 属性 面板 上 的 拆 分 单元 格 按钮 ， 将 
其 拆 分 为 三 行 ， 选 中 拆 分 后 的 第 二 行 单元 格 ， 将 其 拆 分 为 三 列 。 

13 引 在 第 一 行 和 第 三 行 单 元 格 中 插入 疼 像 ， 在 第 二 行 第 一 列 和 第 二 行 第 三 列 的 单元 
格 中 也 插入 图 像 。 

至 此 ， 痛 页 的 整体 布局 制作 完成 ， 此 时 的 页 面 在 实时 视图 中 的 效果 如 图 14-44 所 示 。 
接 下 来 在 页 面 中 计 加 内 容 。 

01. 将 鼠标 指针 定位 在 “ 鹤 册 活动 ”区 域 押 在 的 单元 格 中 ， 设 置 单元 格 内 容 的 水 平 
对 齐 方式 和 垂直 对 齐 方式 均 为 居中 ， 插 入 一 幅 图 片 。 

02 昌 将 光标 定位 在 “至 至 学 园 ” 下 方 的 空 日 单元 格 中 ， 设 置 单元 格 内 容 的 水 平 对 齐 
方式 为 届 中 ， 垂 百 对 齐 方式 为 顶端 ， 插 入 一 张 六 行 两 列 的 表格 ， 表 格 宽 度 为 100%， 单 元 格 
融 度 为 20。 然 后 在 雪 格 的 第 一 列 中 搬入 项 目 编号 ， 第 二 列 中 捅 入 文本 ,并 为 文本 添加 链接 。 

03. 将 光标 定位 在 “ 宇 贝 作品 ”下 方 的 空 日 单元 格 中 ， 设 置 单元 格 内 容 的 水 平 对 齐 
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方式 和 垂 二 对 章 方式 均 为 居中 ， 然 后 在 单元 格 中 插入 一 个 一 行 四 列 的 表格 ， 表 格 宽度 为 
10096, 


4x93 ETRNO Hin* |vEYUE]GEEXM | SEES iade | EEUU 


图 14-44” 首 面 布局 效果 


&L04 上 选中 表格 中 的 所 有 单元 格 ， 设 置 水 平 对 齐 和 垂直 对 齐 方式 均 为 居中 ， 然 后 分 别 
在 时 元 格 中 插入 图 片 。 此 时 的 页 面 效 来 如 图 14-45 所 示 。 
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图 14-45 页面 效 果 


接 下 来 通过 添加 代码 ， 使 插入 的 图 片 深 动 起 来 。 

和 05 有 在 设计 视图 中 选中 要 滚动 的 表格 , 切换 到 代码 视图 , 在 选中 代码 的 上 方 添加 如 下 
代码 : 

<marquee behavior=scroll scrollAmount=6 scrollDelay=0  direction-right 
width=495 height-120 onmouseover=this. stop() onmouseout-this. start ()> 

06 和 在 选中 代码 结束 的 下 方 添加 </marquee>。 

下 面 简 要 解释 一 下 上 述 代码 中 各 个 参数 的 功能 。 
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direction: 表示 湾 动 的 方向 ， 值 可 以 是 left，right，up，down， 默 认为 left. 
behavior: 表示 滚动 的 方式 ， 值 可 以 是 scroll GOES] . slide (滑动 一 次 ) 
或 alternate (来 回 滚 动 ) 。 
loop: 表示 循环 的 次 数 ， 值 是 正 整 数 ， 默 认为 无 限 循环 。 
scrollamount: 表示 运动 速度 。 
scrolldelay: 表示 停顿 时 间 ， 默 认为 0。 
height 和 width: 表示 运动 区 域 的 局 度 和 宽度 ， 什 是正 整 数 或 百分数 。 
hspace 和 vspace: 表示 元 素 到 区 域 边界 的 水 平 距离 和 垂直 距离 。 
onmouseover-this.stopO: 表示 当 鼠 标 移 到 滚动 区 域 上 时 ， 停 止 滩 动 。 
onmouseout=this. start 0): 当 忌 标 移 开 滚动 区 域 时 ， 继 续 滚 动 。 
此 外 ， 还 有 两 个 不 太 负 用 的 参数 。 
€ align: 表示 元 素 的 牌 直 对 齐 方式 , 值 可 以 是 top, middle, bottom, 默认 为 middle 
€  bgcolor 表示 运动 区 域 的 背景 色 ， 值 是 16 进 制 的 RGB 闫 色 ， 默 认为 日 色 
此 时 在 实时 视图 中 预 钨 效果 可 以 看 人 到， 表格 中 插入 的 图 片 从 左 至 右 深 动 ， 当 将 限 标 移 
到 图 厂 上 时 ， 集 止 深 动 ; 移 开 限 标 ， 继 续 深 动 。 

07 朋 将 光标 定位 在 “成 长 天 地 ”下 方 的 空 日 单元 格 中 ， 设 置 单 元 格 内 容 的 水 平 对 章 
方式 为 大 中， 垂直 对 齐 方式 为 项 新 ， 插 入 一 张 四 行 一 列 的 表格 ， 表 格 宫 度 为 100%， 单 元 格 
高 度 为 30。 然 后 在 单元 格 中 插入 文本 ， 并 为 文本 添加 链接 。 

08 同 理 ， 在 “ 师 生 风采 ”和 “父母 学 香 ” 下 方 的 空 昌 单 元 格 中 插入 表格 和 文本 。 
此 时 的 页 面 效 末 如 图 14-46 所 示 。 
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图 14-46 页 面 效果 


09 在 页 面 左 侧 的 空白 单元 格 中 输入 公告 文本 。 
10 执行 【文件 】/【 保 存 】 命 令 ， 将 文件 保存 在 当前 站 点 目录 下 。 
至 此 ， 首 页 制作 完毕 。 用 户 即 可 在 浏览 器 预览 页 面 效果 。 
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